分两部分:
1.加载音乐文件
主要学习了加载页面的代码game.loader。
var loader = { loaded: true, loadedCount: 0, // Assets that have been loaded so far totalCount: 0, // Total number of assets that need to be loaded init: function() { // check for sound support var mp3Support, oggSupport; var audio = document.createElement('audio'); if (audio.canPlayType) { // Currently canPlayType() returns: "", "maybe" or "probably" mp3Support = "" != audio.canPlayType('audio/mpeg'); oggSupport = "" != audio.canPlayType('audio/ogg; codecs="vorbis"'); } else { //The audio tag is not supported mp3Support = false; oggSupport = false; } // Check for ogg, then mp3, and finally set soundFileExtn to undefined loader.soundFileExtn = oggSupport ? ".ogg" : mp3Support ? ".mp3" : undefined; }, loadImage: function(url) { this.totalCount++; this.loaded = false; $('#loadingscreen').show(); var image = new Image(); image.src = url; image.onload = loader.itemLoaded; return image; }, soundFileExtn: ".ogg", loadSound: function(url) { this.totalCount++; this.loaded = false; $('#loadingscreen').show(); var audio = new Audio(); audio.src = url + loader.soundFileExtn; audio.addEventListener("canplaythrough", loader.itemLoaded, false); return audio; }, itemLoaded: function() { loader.loadedCount++; $('#loadingmessage').html('Loaded ' + loader.loadedCount + ' of ' + loader.totalCount); if (loader.loadedCount === loader.totalCount) { // Loader has loaded completely.. loader.loaded = true; // Hide the loading screen $('#loadingscreen').hide(); //and call the loader.onload method if it exists if (loader.onload) { loader.onload(); loader.onload = undefined; } } }
2.播放代码及调用
分为播放、暂停、判断状态
var game = { init: function() { loader.init(); game.backgroundMusic=loader.loadSound('audio/backgroundMusic');//背景音乐加载 startBackgroundMusic:function(){ var music=$('#backgroundMusic')[0]; game.backgroundMusic.play(); music.style="background:rgba(255,255,255,0)"; }, stopBackgroundMusic:function(){ var music=$('#backgroundMusic')[0]; music.style="background:rgba(128,128,128,0.5)"; game.backgroundMusic.pause(); game.backgroundMusic.currentTime=0;//回到音乐开始的地方 }, musicBackgroundMusic:function(){ var music=$('#backgroundMusic')[0]; if (game.backgroundMusic.paused) { game.backgroundMusic.play();//音乐play的地方,只要调用musicBackgroundMusic函数,背景音乐就会播放 music.style="background:rgba(255,255,255,0)"; }else{ game.backgroundMusic.pause(); $('#backgroundMusic')[0].style="background:rgba(128,128,128,0.5)"; } } }
3.同理,给其他事件绑定音乐,也是先定义音乐名称,加载完成后,根据什么时候调用播放等等。
4.注意事项:素材文件要每个都准备ogg格式和mp3格式。因为代码中只是判断浏览器支不支持ogg和mp3格式,而不是优先选择。音乐好像只能播放一遍,没有循环(待解决)。