mp3 jukebox

Hi.

I have a sample to get you started.

I didn't apply the fade effect though.

But the app will play all songs and you can also control the flow with common playback buttons.

Preview:

​Animate CC - HTML5 Canvas - Simple Jukebox

JavaScript code:

var myRoot = this;
var queue;
var loopButton;
var previousButton;
var playButton;
var stopButton;
var nextButton;
var loaderAnim;
var sourceText;
var canLoop = true;
var loopButtonEnabledAlpha = 1;
var loopButtonDisabledAlpha = 0.2;
var currentSongIndex = 0;
var previousSongIndex = currentSongIndex;
var sources =
[
     "https://upload.wikimedia.org/wikipedia/commons/6/65/Star_Spangled_Banner_instrumental.ogg",
     "https://upload.wikimedia.org/wikipedia/commons/0/0d/Hino-Nacional-Brasil-instrumental-mec.ogg",
     "https://upload.wikimedia.org/wikipedia/commons/a/a3/Kimi_ga_Yo_instrumental.ogg"
];
function start()
{
     createjs.Touch.enable(stage);
     loaderAnim = myRoot.loaderAnim;
     sourceText = myRoot.sourceText;
     loopButton = myRoot.loopButton;
     previousButton = myRoot.previousButton;
     playButton = myRoot.playButton;
     stopButton = myRoot.stopButton;
     nextButton = myRoot.nextButton;
     loopButton.visible = false;
     previousButton.visible = false;
     playButton.visible = false;
     stopButton.visible = false;
     nextButton.visible = false;
     setLoopButton();
     queue = new createjs.LoadQueue();
     queue.installPlugin(createjs.Sound);
     queue.addEventListener("complete", handleComplete);
     queue.loadManifest
     (
          [
               {
                    src: sources[0],
                    id: "sound1"
               },
               {
                    src: sources[1],
                    id: "sound2"
               },
               {
                    src: sources[2],
                    id: "sound3"
               }
          ]
     );
}
function handleComplete(event)
{
     myRoot.removeChild(loaderAnim);
     myRoot.playlist = [];
     myRoot.playlist[0] = createjs.Sound.createInstance("sound1");
     myRoot.playlist[1] = createjs.Sound.createInstance("sound2");
     myRoot.playlist[2] = createjs.Sound.createInstance("sound3");
     loopButton.on("click", function(e)
     {
          canLoop = !canLoop;
          setLoopButton();
     });
     previousButton.on("click", function(e)
     {
          changeSong(-1);
          setEndListener();
     });
     playButton.on("click", function(e)
     {
          playSong(currentSongIndex);
          setSourceText("source: " + sources[currentSongIndex]);
          e.currentTarget.visible = false;
          stopButton.visible = true;
     });
     stopButton.on("click", function(e)
     {
          stopSong(currentSongIndex);
          setSourceText("");
          e.currentTarget.visible = false;
          playButton.visible = true;
     });
     nextButton.on("click", function(e)
     {
          changeSong(1);
          setEndListener();
     });
     playSong(currentSongIndex);
     setSourceText("source: " + sources[currentSongIndex]);
     setEndListener();
     loopButton.alpha = 0;
     loopButton.y += 50;
     loopButton.visible = true;
     previousButton.alpha = 0;
     previousButton.y += 50;
     previousButton.visible = true;
     stopButton.alpha = 0;
     stopButton.y += 50;
     stopButton.visible = true;
     nextButton.alpha = 0;
     nextButton.y += 50;
     nextButton.visible = true;
     createjs.Tween.get(loopButton).wait(0).to({alpha:1, y:loopButton.y - 50}, 350, createjs.Ease.cubicOut);
     createjs.Tween.get(previousButton).wait(100).to({alpha:1, y:previousButton.y - 50}, 350, createjs.Ease.cubicOut);
     createjs.Tween.get(stopButton).wait(200).to({alpha:1, y:stopButton.y - 50}, 350, createjs.Ease.cubicOut);
     createjs.Tween.get(nextButton).wait(300).to({alpha:1, y:nextButton.y - 50}, 350, createjs.Ease.cubicOut);
}
function setEndListener()
{
     myRoot.playlist[previousSongIndex].off("complete", songCompletedHandler);
     myRoot.playlist[currentSongIndex].on("complete", songCompletedHandler);
}
function songCompletedHandler(e)
{
     e.currentTarget.off("complete", songCompletedHandler);
     if (!canLoop && currentSongIndex === myRoot.playlist.length - 1)
     {
          stopButton.visible = false;
          playButton.visible = true;
          setSourceText("");
          return;
     }
     changeSong(1);
     setEndListener();
}
function stopSong(index)
{
     myRoot.playlist[index].stop();
}
function playSong(index)
{
     myRoot.playlist[index].play();
}
function changeSong(offset)
{
     stopButton.visible = true;
     playButton.visible = false;
     stopSong(previousSongIndex);
     currentSongIndex += offset;
     currentSongIndex = loopClamp(currentSongIndex, 0, myRoot.playlist.length - 1);
     previousSongIndex = currentSongIndex;
     playSong(currentSongIndex);
     setSourceText("source: " + sources[currentSongIndex]);
}
function setLoopButton()
{
     loopButton.alpha = canLoop ? loopButtonEnabledAlpha : loopButtonDisabledAlpha;
}
function setSourceText(string)
{
     sourceText.text = string;
}
function loopClamp(value, min, max)
{
     if (value < min)
          return max;
     else if (value > max)
          return min;
     else
          return value;
}
start();

FLA download:

animate_cc_html5_canvas_jukebox.zip - Google Drive

I hope this helps.

Regards,

JC

Are you aware that things like volume control and multiple simultaneous audio streams are subject to various limitations on mobile browsers?

https://createjs.com/docs/soundjs/classes/Sound.html