码迷,mamicode.com
首页 > Web开发 > 详细

Html5 音效播放器

时间:2017-05-22 13:38:24      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:logs   nbsp   asc   tee   false   list   har   oct   播放   

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

 

Html5 音效播放器

标签:logs   nbsp   asc   tee   false   list   har   oct   播放   

原文地址:http://www.cnblogs.com/weihuan098/p/6888866.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!