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>
已实现的功能如下: