Again, as per the last two sections about webaudio music playback... you will need to create an event to "trigger" the music playback. The code demonstrated at the end will include this requirement.
Firstly you'll need to add in a script to allow us to play the music.
The ST 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("YM");
How this works is by calling the 'YM' routine within the CODEF_MUSIC script, which controls playback of Atari ST .YM tunes.
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('So Watt - Tcb Sprites.ym');
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('So Watt - Tcb Sprites.ym');
go();
}
var mycanvas;
var player = new music("YM");
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