So cool! :-) Would be great to get the analyzer to render in a sort of 3D soundscape :-)

Thanks :)

Yes! I've been thinking about that for a while. I would plot the level returned by the analyser node along the Z axis, the frequency along X and then time along Y.

@netsi1964

So I did it! A 3D soundscape. It's called Rasta Lines and is a Pen for the CodePen Creative Challenge #Greyscale_HintOfRainbow_CurvedLinesWeekend http://codepen.io/DonKarlssonSan/pen/mJWrME

This is a fantastic web audio demo. Very slick. I'm a web audio nerd myself. I really like what you've done with the custom waveform creator, very user friendly. I'm trying to do the same thing you're doing - that is, making web audio more accessible to people. And what you did here is just that. Such exited! Very inspiration! Thanks dude.

Thank you for your feedback! I'm happy to see others that are exited about Web Audio API =)

Nice Web Audio Pens you've made! Hearted immediately =)

Click the last link, if you haven't already, to see all of my 16 Web Audio Pens. I've made several new since I wrote this blog post. My personal favorite is The Checkbox Drum Machine

Hi, this is so awesome it help me alot!! by the way, how do I display a waveform while recording using Web Audio API??? like this pen of you but with waveform?? https://codepen.io/DonKarlssonSan/pen/Mazevy

Awesome post my brother! This will serve as a reference for me. Question...

In your code for the Analyser, I noticed you have a timeline slider. I've been trying to implement that myself, allowing a user to scroll say half-way through the song and the audio would pick up from there. I've been having difficulty with keeping my input range synced with the "currentTime". In your example, it looks like you're doing it with a created <audio> element by changing audio.currentTime. I have been tying my sliders' value to the AudioContext constructor.

var context = new AudioContext(); And then later down the road I use the (read-only) context.currentTime value. I was getting some hiccups with that setup. Is there some internal connection between the audio.currentTime and the AudioContext constructor that you're taking advantage of? Your example seems so simple and it works just as I need it to!

@qodesmith Ok my Pen has two things going on with the slider:

1. The current time is reflected by automatically moving the slider - "Automatic move".
2. The user needs to be able to advance with the slider - "User move"

When I did Automatic move too frequently it was hard to do User move. The Automatic move was interrupting the User move. I solved this by performing Automatic move only each 4th second with setInterval():.

    slider.value = 0;
    // Using four seconds so the user can change the value of
    // the slider. Too short interval will cause the automatic
    // updating to steal the control from the user.
    setInterval(function () {
      slider.value = audio.currentTime; 
    }, 4000); 

This gives the user time to move the slider. It could still happen that the Automatic moving overrides the user's move, but it is less likely.

To be able to do User move I hooked up the change event of the slider to audio.currentTime = x; Like this:

  function jumpTo(here) {
    if (!audio.readyState) return false;
    audio.currentTime = here;
  };

  slider.addEventListener("change", function () {
    jumpTo(this.value);
  });

Sorry @seannhok I must have missed your comment.

I forked the Pitch Shifter Pen and made: Pitch Shifter With Audio Analyser

• I added a canvas element to the HTLM.
• I copy/pasted the drawing code from the second Pen in this post The Web Audio API Tone Generator.
• I made sure to connect the analyser node to the last audio node: the pitch shifter node (jungle):

  analyser = audioContext.createAnalyser();  
  jungle.output.connect(analyser);

Hi Johan,

Thank you for taking the time to put all of this together. Your API has become very useful to me for a personal project/experimentation I am doing involving music and UX/UI. I am normally a designer, and not a developer, so I am very limited with Javascript experience.

Regarding the analyser you built, I was wondering if there is any way to combine the canvas visual with a Soundcloud playlist that's written out in HTML? Right now, I am using the standard Soundcloud API, with the HTML portion as follows:

<div> <a href="https://soundcloud.com/ulysses-arthur/boots-darling-demo"><div /></div></a> <a href="https://soundcloud.com/ulysses-arthur/last-call-late-night-dub"><div></div></a> <a href="https://soundcloud.com/ulysses-arthur/sunrise-siem-reap"><div /></div></a> <a href="https://soundcloud.com/ulysses-arthur/bangkok-watch"><div></div></a> <a href="https://soundcloud.com/ulysses-arthur/the-way-you"><div /></div></a> <a href="https://soundcloud.com/ulysses-arthur/the-siren-interlude"><div></div></a> <a href="https://soundcloud.com/ulysses-arthur/hypnotize-bones-for-a-glimpse"><div /></div></a> <a href="https://soundcloud.com/ulysses-arthur/a-different-wavelength"><div></div></a> <a href="https://soundcloud.com/ulysses-arthur/trouble-take-me-home-demo"><div /></div></a> <a href="https://soundcloud.com/ulysses-arthur/hungry-for-some-heartbreak"><div></div></a> <a href="https://soundcloud.com/ulysses-arthur/the-next-one-a-familiar-feeling"><div /></div></a> <a href="https://soundcloud.com/ulysses-arthur/hannah-hunt-vampire-weekend-cover"><div></div></a> </div>

I appreciate any help or guidance to where I can find some.

Thanks! Shawn

@shawnth

I'm happy that you think the blog post is useful.

Regarding a playlist, there are two options:

1. Have the playlist defined in HTML and read it from JavaScript.
2. Have the playlist defined in JavaScript and render it to HTML.

Both are possible to accomplish with just plain JavaScript. But 1) would be easy with jQuery. 2) would be possible with Knockout. Now a days however Angular and React are more popular, in this particular case both of them seems like overkill for a playlist.

I will throw together an example of 1) with plain JavaScript later.

@DonKarlssonSan

Thank you for taking the time to throw together an example. In the meantime, I will look into angular and react.

@shawnth

I made a fork of the pen: http://codepen.io/DonKarlssonSan/pen/KNZqOO

Since the Pen does not use any framework like Angular or React, I continued in the same style.

Here is what I did:

• I added your playlist to the HTML part. Put it last.
• Cleaned it up a little. Lots of unnecessary <div></div>
• Made it hidden.
• Added some JavaScript code to get all the hrefs (URLs).

document.querySelectorAll(".playlist > a");

• Picked the first item in the playlist.

I leave the rest to you 😀

• Display the list and make it clickable.
• Maybe previous/next buttons...

Even though Angular and React are both overkill in this situation it can still be an interesting experiment just for learning purposes. 😀

@DonKarlssonSan

I am having trouble getting the next song in the playlist to play after the current one is done. Right now, the first song in the list is played, then it stops when it's finished.

As a matter of fact, I am not even familiar enough with Javascript to make the playlist clickable, make previous/next buttons, etc. At least, I am not sure how to do this using the SoundCloud API.

I appreciate you helping out this far, and I don't expect you to take the time to build out a full-fledged audio player that works with your analyser. I am just stumped :(

@shawnth

If you want to learn, my advice is to keep working on your player, keep it as your motivation. Every now and then you will meet a stumbling block. Like now, you don't know how to make the playlist clickable. Make a new Pen from scratch where you make a list of something clickable. Isolate it, keep it simple, just console.log() which item in the list was clicked. Next step: make previous/next buttons. Next step: somehow highlight the currently "playing" song. But it isn't really playing.

And then when you've accomplished that, come back to your player and add click functionality.

As for automatically playing the next song when the current ends, I would look into the ended event. Never tried it myself though.

If you look at how I implemented the Find button, you can see how I go about changing song.

@DonKarlssonSan

Thank you, Johan. I was able to figure out a workaround, however, if I were to want a stroke for the waveform, rather than a fill, how would I go about doing so? I would like the moving wave when responding to music (currently with a black fill) to resemble the idle wave (black stroke).

@shawnth

I made changes to the fork I created earlier.

Is that what you are looking for?

Old code

Draws vertical black lines. Always starts at the bottom, stops at the current point of the dataArray[i].

    analyser.getByteTimeDomainData(dataArray);  
    for(var i = 0; i < bufferLength; i++){
        canvasContext.beginPath();
        canvasContext.moveTo(i, 255);
        canvasContext.lineTo(i, 255 - dataArray[i]);
        canvasContext.closePath();
        canvasContext.stroke();
      }

New code

Draws a line between all the points contained in dataArray.

    analyser.getByteTimeDomainData(dataArray);  
    canvasContext.beginPath();
    for(var i = 0; i < bufferLength; i++){
        canvasContext.lineTo(i, 255 - dataArray[i]);
    }
    canvasContext.stroke();

@DonKarlssonSan

That's exactly what I was looking for! Thanks, again, for your help with all of this.

You are welcome. :)

Great post, Johan.

Do the examples work on iPad or Android phone for you? On iPad, it encountered an error on the first example and the rest didn't load. On a Samsung phone, there didn't appear to be any errors (each example appeared to load OK), but none of the examples actually worked (no sound, no visualizations).

Hmm...

The first and the last plays music on my iPhone. But the visualisation doesn't work on the last one.

Will look into it later. Thanks for reporting.

Thanks so much for writing this. I'm trying to do some visualizations with three.js and you filled in some gaps in my noob-level understanding of Web Audio API.

@sjcobb You are welcome! I'm glad it helped you =)