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>

 

posted @ 2017-05-22 12:13  不会写超过三篇博客  阅读(374)  评论(0)    收藏  举报