基於howler.js開發的音樂播放器

時間 2019-11-10

標籤基於 howler.js howler 開發音樂播放欄目 JavaScript 简体版

原文原文鏈接

howler.js 是一個新的 JavaScript 庫用於處理 Web 的音頻，該庫最初是爲一個 HTML5 遊戲引擎所開發，但也可用於其餘的 Web 項目。 javascript

如下是我基於howler.js作的一個簡單音樂播放器工具。html

<!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>

已實現的功能以下：java