17 - Playing Music (Part 2)

BEFORE we go any further, it is VERY IMPORTANT to note that due to (alleged) security risks, modern browsers will not allow music to play automatically, and must be "triggered" by an event - i.e. you clicking or touching the screen before audio begins.

Before we go any further, I will describe how this would work, and I'll also include it in its' own section in these blogs. 

 

How I normally get around this is to include the following commands at the start of my <script> section. 

For example...

 

<script>

 

document.addEventListener('click', function(){

 

    // PUT EVENT HERE TO TRIGGER MUSIC

 

    go();

}

 

What this does is tell the webpage to "listen" for a mouse click event on the canvas, before doing the audio, and this gets around the security restriction.

 

There is a little more to it if you want the visitor to understand that they have to click somewhere etc., which I'll describe next...

 

Normally AT THE END of the init() function, we tell the script to launch the main go() function, but we want it to wait for a mouse click, so INSTEAD we modify the init() function so that instead it goes to a new function called wait()...

 

THEN we add the new wait() function....

 

function wait(){

    mycanvas.fill('#FFFFFF');

 

    logo.draw(mycanvas,360,184);

 

    mycanvas.contex.fillStyle="#FF0000";

    mycanvas.contex.font="32px Arial";

    mycanvas.contex.fillText("CLICK OR TOUCH CANVAS TO BEGIN",74,280);

 

    requestAnimFrame( wait );

}

 

This gives a "waiting" screen, where the user is advised to click "here" in order to begin the audio, and then proceed to the main go() loop.


PART TWO: Commodore AMIGA MOD music



Firstly you'll need to add in a script to allow us to play the music.
The Amiga replay engine is simpler than the C64 one, and we only need to call one script. 

<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_music.js"></script>

Next up is a couple of commands to setup the playback, and these should be placed in your code BEFORE the INIT section.

var player = new music("MK");
player.stereo(true);

How this works is by calling the 'MK' routine within the CODEF_MUSIC script, which controls playback of Amiga .MOD tunes.
The next line defines if the playback is in STEREO or not. (If you want it in MONO, then set the flag to FALSE).


Finally, in the INIT section, just before the go(); command, we add this final command to load and run the song. 
NOTE: As with the C64 songs, the music file MUST be in a local directory, as cross-origin locations will cause the browser to refuse to play the song due to a security error.

player.LoadAndRun('enigma.mod');

And that's it! The full page code is below as en example, which can be seen working here.


<!DOCTYPE HTML>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>TEST</title> 

<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_core.js"></script> 
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_music.js"></script>

<script> 

document.addEventListener('click', function(){

    player.LoadAndRun('enigma.mod');

    go();

}


var mycanvas;

var player = new music("MK");
player.stereo(true);

function init(){
mycanvas=new canvas(640,480,"main");

wait();
}

function wait(){

    mycanvas.fill('#FFFFFF');

     logo.draw(mycanvas,360,184);

     mycanvas.contex.fillStyle="#FF0000";

mycanvas.contex.font="32px Arial";

    mycanvas.contex.fillText("CLICK OR TOUCH CANVAS TO BEGIN",74,280);

    requestAnimFrame( wait );

}


function go(){
mycanvas.fill('#000000');

requestAnimFrame( go );
}

</script>

</head> 
<body onLoad="init();">
<body bgcolor="#FFFFFF">
<br>
<center>
<div id="main"></div><br><br>
<a href="javascript:window.location='view-source:'+window.location">View Source</a>
</center>
</body> 


</html>

1 comment: