html audio basic funcs_html/css_WEB-ITnose-HTML Tutorial-php.cn

html audio basic funcs_html/css_WEB-ITnose
WBOY
Release： 2016-06-21 09:04:28
Original
836 people have browsed it
<<!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>
Copy after login