We Keep Coding

how to make a soundcloud widget?

So I have been looking to make a Sound Cloud widget for code-pen for testing then I will implement it to my website. what I am trying to aim for is something that displays a couple of tabs that you can click on that will let you change the view to different parts of my profile such as my re-posts and my tracks that is all I want but my problem is that i do not know how to code at all I have looked at the soundcloud resources:
https://developers.soundcloud.com/docs/widget
but it is all confusing as I have no idea what to start with as a base and what I need. I have looked for templates but found nothing that matches my keywords.
for now all I am trying to do is create a widget that matches this Image
using css js and html and any other code that can be embedded in html
I also want to make it possible for anyone to modify it for their own account by a variable at the top of the JavaScript code for the key, a commented out link to get a consumer key and any other key that is related/required for the widget, the user id / user URL, how to find the user id with link.
for now those are not required because getting a working widget is my first priority even if it does not look good. so I am asking for help on what I NEED to do first to get a base to it for example what lines do I need in my html to import the SDK for the widget? what are the requirements do I need for my widget such as a API key and what one because I know you can enable certain things with api's and disable options such as playback

https://www.w3schools.com/howto/howto_js_tabs.asp
Make the href="www.example.soundcloud.com/user/re-posts" for each tab, I am unfamiliar with soundcloud API's though

Muses radio player css instead of skin file

I'm trying to setup a muses radio player (https://www.muses.org) without the skin files. Instead, I would like to design the player with css and trigger the play/stop events in javascript.
Does anyone know if this is possible?
I've tried setting the skin value to an empty string, false, null, and omitted it completely from:
<script type="text/javascript" src="http://hosted.muses.org/mrp.js">
</script>
<script type="text/javascript">
MRP.insert({
'url':'http://localhost/stream-url',
'codec':'mp3',
'volume':100,
'autoplay':false,
'buffering':5,
'title':'test',
'bgcolor':'#FFFFFF',
'skin':'',
'width':180,
'height':60
});
</script>
Nothing works.

No go. Muses works in shockwave flash. Its a precompiled control program, and without the source code what you want to do won't work. (update) I did look at the linked JavaScript file, and wow, its 3000 lines of code without any documentation and obfuscated variable names. So what you want to do might be achievable, but you'd first have to understand each of those 3000 lines of code (good luck with that!) So I'd have to say, what you want to do might be achievable, but its not totally clear on what the shockwave flash tool does exactly, and how it integrates to the site, so maybe not. (In practical terms, I still call this a No-Go.)
If you'd like you can create your own player via JavaScript, but that's a totally different conversation, but certainly can be done. There are some great examples out there. I'd start the learning process by looking at the stuff generated by Chris Wilson. That guy is brilliant on this stuff. Check out his github repository HTML5 has some very nice audio tools in the interface. Check out this site.

For the latest version.
$('.musesStyleReset div[title="play"]').click();
$('.musesStyleReset div[title="stop"]').click();

Add effects to already recorded sound with Web Audio API

My task is to add some effect to the recorded file.
Here is a script in action I'm using
Recorder.JS
and here is a code https://github.com/cwilso/AudioRecorder/blob/master/js/recorderjs/recorder.js
I want to add pitch.
I tried looking in other codes which add some effects to the audio.
But it seems like recorder.js handles buffers differently.
edit
function playbackRecorderAudio() {
audioRecorder.getBuffer(function(buffers) {
var source = audioContext.createBufferSource();
source.buffer = audioContext.createBuffer(1, buffers[0].length, 44100);
source.buffer.getChannelData(0).set(buffers[0]);
source.buffer.getChannelData(0).set(buffers[1]);
source.connect(audioContext.destination);
source.noteOn(0);
});
}
here is how my code looks now, with this function, I request already recorded audio and play it back.
Can I simulate some effect to get close to this: http://www.youtube.com/watch?v=Lr80slqJ3zo
This is in Georgian but I hope you get the idea. Its more like Helium Pitch. (note, I don't whant to change audio speed).
When I tried to research helium effect I found this: http://chemistry.about.com/b/2013/08/26/helium-voice-is-not-higher-in-pitch.htm
it saies that sound should be 2.5 faster then air.
Can I get something close to this?
edit
from what #cwilso suggested, http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html is the closest I have seen so far. But I could not manage to modify it, to work with my playbackRecorderAudio().
Thats why I'm starting a bounty with everything I have
edit
here is a jsFiddle of my code:
http://jsfiddle.net/Lsvnp/1/
First let me describe what I'm trying to achieve:
I want to record sound from users microphone, add this effect to it.
When user press "stop recording" button (stopRecording function) , it will prepend HTML audio which will allow user to listen what he has recorded. If he likes it, he then will upload it to my server (uploadAudio function)
WHen page is loaded, recording is not initalized. to initialize recording, user has to press some button which will trigger recordAudio function.
Now the problem is that I don't know where to connect my playbackRecorderAudio function. to use it as coverter from buffer.

The code of the granular effect you want is usable. The only thing you need to do is connect the output from your source node to the first node of the granular effects page code. Still that code is a bit messy but I will try to explain it as good as possible beneath.
After some searching in the code, it looks like the audio structure goes like this:
source -┬-> grainWindowNode -┬-> panner -┬-> dryGain -> compressor -┬-> destination
└-> bypass -┘ └-> wetGain -> convolver -┘
I made the code so it works for you, see this jsfiddle
This is a bit hard to make as you need to set all the values yourself to fit what you want.
All the code is in the jsfiddle, and there are two things you have to do to make it work:
read the comment on top (download that file and put it on the same server as where you are hosting it, else CORS makes sure you can't fetch the resource. (or you must specify a header on the server)
Put this code somewhere in your code, so that the function playbackRecorderAudio() does something useful. I can help you if you provide me all your code, to make sure it works.
If you want any explainment about the code feel free to ask (I do not know your current knowledge about the audio api, and to explain everything?)

You should probably look at using OfflineAudioContext rather than Recorder.JS - OAC can work in faster-than-realtime.
That said - "helium pitch" looks pretty hard to do, as it alters the harmonics of your voice. That sounds more like vocoding, with the voice sound being the modulator and the carrier, but shifting the harmonic bands (or something like that). The YouTube video you pointed to sounded like it was actually pitch-shifted, but with rate correction - like granular synthesis. Check out Chris Rogers' example http://chromium.googlecode.com/svn/trunk/samples/audio/granular.html - set the speed to 1.0, and the pitch to something greater than zero (several hundred cents, at least). Is this the effect you're looking for? If you, you can dig in to Chris' example to see how to do that, or use a live-effect version like the "pitch doubler" in my input effects (http://webaudiodemos.appspot.com/input/) (which can actually be set to be faster or slower, and controlled to be something other than octaves).

Pitch shifting is achieved using FFT (Fast Fourier Transform) which is implemented in the Web Audio API. O'Reilly has a book "Web Audio API" which covers the API nicely. You can see the chapter on Pitch and the Frequency Domain here.

How to filter file types (extensions) while using the chrome media galleries api

First post here.
I fall squarely into the category of "severely new". So, if you are kind enough to respond to this question, please assume the following:
If it's a code other than an if else statement, I probably need detailed instructions about how that code works and where it goes.
So, in other words, while I appreciate your help in advance, please don't say "Oh, no problem, just wrhimuss the frammus with a 4:3 array".
OK, caveat over, here's my deal:
I've been working (playing) around with the chrome media gallery sample app in an attempt to create a small gallery/player for webm video files, and after a week or so of work it's coming together quite nicely if you ignore the terribly organized code and css problems but somehow I made it work (mostly because most of the work was already done).
The chrome media gallery sample app adds to the gallery list every media file (music, pictures, video) it can find and that's the issue I'm trying to address here. I tried deleting every reference to pictures, music and others from the js code but the files still appear on the list only now they can't be "played". I want to make the gallery webm only, maybe mp4 or even every video type but that's it, no pictures and no audio.
So, any suggestions as to how I can fix this issue?
Thanks very much in advance!
EDIT:
This is the code I'm using: JS (not very different, is it?). I believe the solution is in lines 121 or 152 but I'm too much of a novice to know what to do.
EDIT2:
Yeah, I was right after all. Finally managed to make it work the way I wanted, can't believe it was that simple. Thanks for all your help, you can consider this question solved.

At https://github.com/GoogleChrome/chrome-app-samples/blob/master/media-gallery/media-gallery.js#L113 the sample checks what type of media each file is, and does something different for images, audio, and video. If you only care about video, you can just grab the video ones and do whatever you want, ignoring the others.

So I just replaced line 152 with this:
var path = entries[i].name;
var type = getFileType(path);
if (entries[i].isFile && type == "video") {
It sends the entries' names to the getFileType function and returns if the entry is a video.

Jquery Plugin qTip2 is this what is use on Hypem.com?

If you go to this website you will notice http://craigsworks.com/projects/qtip2/ qTip2 Jquery Plug (the green template theme) .. It is a project called qTip2 Jquery Plugin. It looks similar to http://hypem.com/ Jquery.
Is this what they used for audio player located on top. It looks like they used this Jquery and and implemented JavaScript into qTip2. I was looking to do something similar I noticed that there is 22 JavaScript, 2 CSS, 2 PHP and HTML. One reason to successfully code this, is because trying to achieve a player that hovers above and users can browse around the site and their music is not interrupted. I seen it done with I-frames but that is not going to be acceptable. If you have an Ajax example that would be terrific. I can't find any useful resources relating to an Ajax MP3 player that could be on the top panel. Do you think this will work , am I on the right track?
If you could please provide source code or any resources I would greatly appreciate. Thank you

If you can use html5 https://github.com/goldfire/howler.js that can then have your player in fixed position block element.