乞丐版HTML5播放器

来源：互联网发布：公钥密码算法编辑：程序博客网时间：2024/05/16 00:39
前不久新学的html5中的audio，写了一个简单功能的音乐播放器，如不足之处，还请大神们指点一二。
<!DOCTYPE html><html><head>    <title>音乐播放器</title>    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />    <link rel="stylesheet" href="css/style.css" />    <script src="js/jquery-1.8.2.min.js"></script>    <script src="js/jquery.mobile-1.2.0.js"></script>    <style>    .singname{float:left;width:20%;height:30px;font:12px;}    </style>    <script>    $(function() {        //播放器样式设置        playwidth = $(window).width();        outerwidth = playwidth * 0.9;        $("#outer").css('width', outerwidth);        $("#rate").css('width', outerwidth * 0.6);        $("#ratetime").css('width', outerwidth * 0.1);        //设置内容区域的高度，确保播放区域位于页面靠下位置        $("#content").css('height', $(window).height() * 0.75);        //获取audio元素        var audio = $("#audios");        //进度条        function setI() {            var total = audio.duration; //获取总时长            var now = audio.currentTime; //当前时间            // 播放进度随时显示            var progress = now / total;            var width = progress * ($("#rate").width());            $("#ratemidtop").css('width', parseInt(width));            // 播放时间的提示更新            var totalTime = (total / 60).toFixed(2); //保留2位小数            var nowTime = (now / 60).toFixed(2);            $("#ratetime").text(nowTime + '/' + totalTime);        }        //播放操作        $('#content a').click(function() {            var self = $(this);            var text = self.text(); //获取文字是播放还是停止            if (text == "播放") {              // 选中哪首音乐哪首音乐开始播放              audio.src = self.attr('href');              audio.play();              // 文字变成“停止”              $("#content a").text("播放");              self.text('停止');              // 音乐播放器按钮图标变成“暂停”图标,设置播放状态背景图片位置为（-70px -25px）              $("#playp").css('background-position', '-70px -25px');//雪碧图(sprite)              setInterval(setI, 1000);              //前进              $("#next").click(function() {                  audio.currentTime += 3;              });              //后退              $("#prv").click(function() {                  audio.currentTime -= 3;              });              //播放/暂停                             $('#playp').click(function() {                if (audio.paused) {                    audio.play();                    $('#playp').css('background-position', '-70px -25px');                    setInterval(setI, 1000);                    self.text('停止');                } else {                    audio.pause();                    $('#playp').css('background-position', '-50px -25px');                    self.text('播放');                }              });            } else { //停止时                // 链接文字是“停止”，单击时,链接文字变成“播放”                self.text("播放");                // 视频停止播放                audio.pause();                // 进度条停止更新                clearInterval(setInterval(setI, 1000));                // 音乐播放器按钮图标变成“播放”图标,设置播放状态背景图片位置为（-50px -25px）                $("#playp").css('background-position', '-50px -25px');            }            return false;        });        // 音量设置        $('#volume').click(function() {            if (audio.muted) {   //关闭静音            audio.muted = false;            $('#volume').css('background-position','-90px -45px');            } else {   //开启静音                audio.muted = true;                $('#volume').css('background-position','-90px -20px');            }        });    });    </script></head><body>    <div data-role="page">      <div data-role="header" data-position="fullscreen">        <div data-role="navbar">          <ul>           <li><a href="#" class="ui-btn-active">在线音乐</a></li>           <li><a href="#">本地音乐</a></li>           </ul>         </div>      </div>        <!-- /header -->      <div data-role="content" id="content">        <div>          <div class="singname">千千阙歌</div>             <div class="sing"><a href='music/02.mp3' id='play'>播放</a>             </div>     </div>     <div>       <div class="singname">思念人之屋</div>         <div class="sing">             <a href='music/01.mp3' id='play'>播放</a>         </div>        </div>      </div>        <!-- /content -->        <div data-role="footer" class="ui-bar">            <audio src="music/02.mp3" id='audios'></audio>            <!-- 播放器外边框 -->            <div id="outer">                <!-- 播放器控制区域: 上一首 下一首 播放 暂停 -->                <div id="control">                    <div id="prv">&nbsp</div>                    <div id="playp" class='ply'></div>                    <div id="next">&nbsp</div>                </div>                <!-- 播放器控制区域结束 -->                <!-- 播放进度-->                <div id="rate">                    <div id="ratetop"></div>                    <div id="ratemid"></div>                    <div id="ratemidtop">&nbsp</div>                    <div id="ratebom"></div>                </div>                <!-- 播放进度结束-->                <div id="ratetime">                </div>                <!-- 音量-->                <div id="volume"></div>                <!-- 音量结束-->            </div>            <!-- 播放器外边框结束 -->        </div>    </div>    <!-- /page --></body></html>
0 0