I'm going to split this into three sections, one for Commodore 64 SID music, one for Commodore Amiga MOD music, and finally, one for Atari ST YM music.
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 ONE: Commodore 64 SID music
Firstly you'll need to add in some scripts to allow us to play the music.
The C64 SID replay engine is quite complex, so we need to call THREE scripts.
<script src="http://codef.namwollem.co.uk/JS/wothke/SID/scriptprocessor_player.min.js"></script>
<script src="http://codef.namwollem.co.uk/JS/wothke/SID/backend_tinyrsid.js"></script>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_SID_music.js"></script>
Next up is a simple command to play our song, and it can be placed anywhere in the code, but I'd suggest at the end of the INIT section, before that go(); command - so it is launched just before the screen runs.
playSID('yiear.sid',18);
How this works is by calling a 'playSID' command, with two parameters.
The first parameter is the song name - NOTE this MUST be a local file, as if it is called from another location it will trigger a cross-origin error on your browser!
The second paramter is only required if the SID tune contains multiple songs, and this parameter is the track number, so in our example we will use the songset for "Yie Ar Kung Fu", track 18 - which is the main theme.
If your song does not have any subsongs or tracks, you can either enter a '0' (zero), or not bother (i.e. playSID('songname.sid'); )
Below is the full code for this page, and the working example can be seen 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/wothke/SID/scriptprocessor_player.min.js"></script>
<script src="http://codef.namwollem.co.uk/JS/wothke/SID/backend_tinyrsid.js"></script>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_SID_music.js"></script>
<script>
document.addEventListener('click', function(){
playSID('yiear.sid',18);
go();
}
var mycanvas;
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>
No comments:
Post a Comment