Html5 音效播放器
生活随笔
收集整理的这篇文章主要介绍了
Html5 音效播放器
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<!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>
转载于:https://www.cnblogs.com/weihuan098/p/6888866.html
总结
以上是生活随笔为你收集整理的Html5 音效播放器的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： python--输出spwm的数组
- 下一篇： 【告别信】三年了，是该离开了！