Heim >Web-Frontend >HTML-Tutorial >html audio basic funcs_html/css_WEB-ITnose
html audio basic funcs_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:04:28827Durchsuche
<<!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>
Stellungnahme：
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
Vorheriger Artikel：HTML行内元素、块状元素以及空(void)元素_html/css_WEB-ITnoseNächster Artikel：CSS选择器相关知识_html/css_WEB-ITnose