mp3 jukebox

[peor]

window.onload = init;
function init(){
var myRoot = this;
var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound); 
queue.addEventListener("complete", handleComplete);
queue.loadManifest([{ src: "chrismas.mp3", id: "sound1" },
                    { src: "fransk3.mp3", id: "sound2" },
                    { src: "orup.mp3", id: "sound3" }]);
function handleComplete(event) {
    // assign each sound to unique variable
    myRoot.sound1 = createjs.Sound.createInstance("sound1");
    myRoot.sound2 = createjs.Sound.createInstance("sound2");
    myRoot.sound3 = createjs.Sound.createInstance("sound3");
    // start playing sound1
    myRoot.sound1.play();
}
}

How do I play the following songs in a list as a jukebox. I want to play each song in a list that also fades into each song. Then I also want it to loop but or even stop this after three songs. How I do that.

[ClayUUID]

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

[peor]

That's not the answer I'm looking for. Never mind! It doesn't matter but you want not to help me with that. I hope another expert programmer can help me. I want any to help solve with mp3 jukebox with through modify the codes. I'm not expert yet.

[JoãoCésar]

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

[peor]

Thank you for your suggestion but it was not a jukebox with buttons. I'd rather have a jukebox in the background. There you can either loop or stay with two different versions of the encoding.

[JoãoCésar · Accepted solution]

You don't need the buttons.

The songs will loop automatically without assistance the way things are set by default.

[peor]

Thank you for helping me answer my topic. Now I do not need to find out more about this. Thanks again for the help.

[peor]

It was not as I had imagined.

I changed some things as like this:

function init() {
var myRoot = this;
var queue;
var currentSongIndex = 0;
var previousSongIndex = currentSongIndex;
var sources = 
[
"fransk2.mp3",
"fransk3.mp3",
"orup.mp3"
];
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.playlist = [];
myRoot.playlist[0] = createjs.Sound.createInstance("sound1");
myRoot.playlist[1] = createjs.Sound.createInstance("sound2");
myRoot.playlist[2] = createjs.Sound.createInstance("sound3");
playSong(currentSongIndex);
}
function playSong(index)
{
myRoot.playlist[index].play();
}

Now I want it to play but nothing happens and now it's just quiet