Heim > Web-Frontend > HTML-Tutorial > html audio basic funcs_html/css_WEB-ITnose

html audio basic funcs_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:04:28
Original
837 Leute haben es durchsucht

<<!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>
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage