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.
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>
GOOD WORK !!!
ReplyDelete