howler.js 是一个新的 JavaScript 库用于处理 Web 的音频，该库最初是为一个 HTML5 游戏引擎所开发，但也可用于其他的 Web 项目。 以下是我基于howler.js做的
howler.js 是一个新的 JavaScript 库用于处理 Web 的音频，该库最初是为一个 HTML5 游戏引擎所开发，但也可用于其他的 Web 项目。
以下是我基于howler.js做的一个简单音乐播放器工具。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>音乐播放</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://goldfirestudios.com/proj/howlerjs/howler.min.js?v=1.1.28"></script> <script type="text/javascript"> var sound; var musics = ['330786.mp3', '332089_Beyond.mp3'];//请在同目录下放置两首音乐文件 var currItem; function newSound(){ sound = new Howl({ autoplay: false, loop: false, volume: 0.5, onend: function() { console.log('Finished!'); } }); } function play(){ console.log("接着上次继续播放"); sound.play(); } function startplay(){ if(sound !== undefined)sound.stop(); newSound(); currItem = 0; sound.urls([musics[0]]); console.log("开始播放："+musics[currItem]); sound.play(); } function next(){ sound.stop(); newSound(); currItem = currItem+1; sound.urls([musics[currItem]]); console.log("播放下一首："+musics[currItem]); sound.play(); } function pre(){ sound.stop(); newSound(); currItem = currItem-1; sound.urls([musics[currItem]]); console.log("播放上一首："+musics[currItem]); sound.play(); } function stop(){ sound.stop(); console.log("停止完成"); } function pause(){ sound.pause(); console.log("暂停成功，点击开始播放将接着播放"); } function volumn(vl){ sound.volume(vl,null); console.log("现在音量是："+vl); } function sprite(){ console.log("当前总长度："+sound._duration+",已播放："+sound._activeNode().currentTime); } function mute(){ sound.mute(); } function unmute(){ sound.unmute(); } </script></head><body><input type="button" name="startplay" id="startplay" onclick="startplay();" value="从头开始播放"><input type="button" name="play" id="play" onclick="play();" value="开始播放"><input type="button" name="pause" id="pause" onclick="pause();" value="暂停播放"><input type="button" name="stop" id="stop" onclick="stop();" value="停止播放"><input type="button" name="sprite" id="sprite" onclick="sprite();" value="播放进度"><input type="button" name="next" id="next" onclick="next();" value="播放下一首"><input type="button" name="pre" id="pre" onclick="pre();" value="播放上一首"><select id="volumn" onchange="volumn(this.value);"> <option value="0.1">0.1</option> <option value="0.3">0.3</option> <option value="0.5">0.5</option> <option value="0.7">0.7</option> <option value="1.0">1.0</option></select><input type="button" name="mute" id="mute" onclick="mute();" value="静音"><input type="button" name="unmute" id="unmute" onclick="unmute();" value="解除静音"></body></html>已实现的功能如下：
