html audio basic funcs

<<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
	<title>test audio</title>
	<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
	<audio id="myaudio" src="" controls="controls" autoplay>
		Your browser does not support the audio tag.
	</audio>

	<div>
		<button id="btn_pause">暂停</button>
		<button id="btn_pre">上一首</button>
		<button id="btn_next">下一首</button>
		<button id="btn_back5s">后退5s</button>
		<button id="btn_forward5s">前进5s</button>
		<button id="btn_speed">速度 X 0.5</button>
	</div>

	<script type="text/javascript">
	var am = {
		index : 0,
		musics : [
			"music/yixiangren.mp3", 
			"music/dukou.mp3", 
			"music/gebenhagendetonghua.mp3",
			"music/ruguoyoulaisheng.mp3"
		]
	};

		$(document).ready(function(){
			$("#btn_pause").click(function(){
				$("#myaudio")[0].pause()
			});
			$("#btn_pre").click(function(){
				if(am.index <= 0){
					alert("已经是第一首啦")
					return;
				}
				am.index--;
				$("#myaudio").attr("src", am.musics[am.index]);
				$("#myaudio")[0].load();
			});
			$("#btn_next").click(function(){
				if(am.index >= am.musics.length-1){
					alert("已经是最后一首啦")
					return;
				}
				am.index++;
				$("#myaudio").attr("src", am.musics[am.index]);
				$("#myaudio")[0].load();
			});
			$("#btn_back5s").click(function(){
				var t = $("#myaudio")[0].currentTime - 5
				if(t < 0){
					t = 0
				}
				$("#myaudio")[0].currentTime = t;
			});
			$("#btn_forward5s").click(function(){
				var t = $("#myaudio")[0].currentTime + 5
				if(t > $("#myaudio")[0].duration){
					t = $("#myaudio")[0].duration
				}
				$("#myaudio")[0].currentTime = t;
			});
			$("#btn_speed").click(function(){
				// $("#myaudio").attr("playbackRate", 0.5);
				$("#myaudio")[0].playbackRate = 0.5;
			});

			$("#myaudio").attr("src", am.musics[am.index]);
			$("#myaudio")[0].load();
		});
	</script>
</body>
</html>


你可能感兴趣的:(html audio basic funcs)