Html5 音效播放器
生活随笔
收集整理的這篇文章主要介紹了
Html5 音效播放器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>HTML5音樂播放器</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body><h2>Sound Information</h2><div id="length">Duration:</div><div id="source">Source:</div><div id="status" style="color:red;">Status: Loading</div><hr><h2>Control Buttons</h2><button id="play">Play</button><button id="pause">Pause</button><button id="restart">Restart</button><hr><h2>Playing Information</h2><div id="currentTime">0</div>
</body>
<script type='text/javascript'>$(document).ready(function() {var audioElement = document.createElement('audio');audioElement.setAttribute('src', 'http://cms.shouji.sogou-inc.com/sweb/sapp/rabbit/fenshou.mp3');audioElement.addEventListener('ended', function() {this.play();}, false);audioElement.addEventListener("canplay",function(){$("#length").text("Duration:" + audioElement.duration + " seconds");$("#source").text("Source:" + audioElement.src);$("#status").text("Status: Ready to play").css("color","green");});audioElement.addEventListener("timeupdate",function(){$("#currentTime").text("Current second:" + audioElement.currentTime);});$('#play').click(function() {audioElement.play();$("#status").text("Status: Playing");});$('#pause').click(function() {audioElement.pause();$("#status").text("Status: Paused");});$('#restart').click(function() {audioElement.currentTime = 0;});});
</script>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/weihuan098/p/6888866.html
總結(jié)
以上是生活随笔為你收集整理的Html5 音效播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python--输出spwm的数组
- 下一篇： Java 多线程使用