Html5 音效播放器

最新推荐文章于 2023-02-22 18:09:28 发布

weixin_30535913

最新推荐文章于 2023-02-22 18:09:28 发布

阅读量131

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weihuan098/p/6888866.html

版权

<!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

weixin_30535913

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5 音效播放器

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>HTML5音乐播放器</title></head><script src="https://ajax.googleapis.com/ajax/libs/j...
复制链接

扫一扫