16 - Playing Music (Part 1)

Of course a large part of any CODEF screen is often some great music to accompany your demoscreen - so I guess we look at how this is done.

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.

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> 

var mycanvas;

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

playSID('yiear.sid',18);

go();
}

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