Home >Web Front-end >HTML Tutorial >html audio basic funcs_html/css_WEB-ITnose
html audio basic funcs_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:04:28826browse
<<!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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML行内元素、块状元素以及空(void)元素_html/css_WEB-ITnoseNext article：CSS选择器相关知识_html/css_WEB-ITnose