欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

自个儿做了个基于h5的移动端音乐播放器,欢迎大家多提建议

更新时间: 2015-03-10 22:35:46 责任编辑: Author_N10

 

自己做了个基于H5的移动端音乐播放器,欢迎大家多提建议。
完全使用javascript原生代码写的,页面没有优化比较简单。
首先贴上HTML代码:

<body>
<div class="con">
    <audio id="aud"></audio>
    <div class="tit">
        当前歌曲:<strong id="name"></strong>
    </div>
    <p id="buffer"></p>
    <div id="container" style="width:200px;height:10px;border:2px solid black;padding:none;">
        <div id="stick" style="background-color:dodgerblue;height:10px;width:0px;"></div>
    </div>
    <div id="btn-group">
        <button id="btn-playorpause">播放</button>
        <button id="btn-prev">上一首</button>
        <button id="btn-next">下一首</button>
    </div>
</div>
<script src="lib/js/audio2.js"></script>
</body>

下面是javascript代码。

/*
 * @author                zhengcong
 * @date                2015-02-03
 * @description        基于html5编写的音乐播发器demo
 */
    window.onload=function(){
        //当前播放的歌曲索引
        var currentIndex=-1;
        //  播放器元素对象
        var audio=document.getElementById("aud");
        // 歌曲列表
        var mlist=["曲目1.mp3","曲目2.mp3","曲目3.mp3"];
        //歌曲路径
        var msrc=["http://tg.vshh.net/vipcard/media/voice/0/0.mp3","http://tg.vshh.net/vipcard/media/voice/0/1.mp3","http://tg.vshh.net/vipcard/media/voice/0/2.mp3"];
        //进度条
        var stick=document.getElementById("stick");
        //初始化函数
        function finit(){
            document.getElementById("name").innerHTML=mlist[0];
        }
        //播放停止按钮
        var oPlayOrPause=document.getElementById("btn-playorpause");
        // 播放或暂停
        oPlayOrPause.onclick=fPlayMusic
        function fPlayMusic(){
            if(currentIndex==-1){
                audio.src=msrc[0];
                currentIndex=0;
            }
            if(audio.paused){
                audio.play();
                oPlayOrPause.innerHTML="暂停";
            }else{
                audio.pause();
                oPlayOrPause.innerHTML="播放";
            }
        }
        // 上一曲
        document.getElementById("btn-prev").onclick=function(){
            if (currentIndex == 0) {
                currentIndex = mlist.length-1;
                document.getElementById("name").innerHTML=mlist[currentIndex];
            } else {
                currentIndex--;
                document.getElementById("name").innerHTML=mlist[currentIndex];
            }
            audio.src = msrc[currentIndex];
            stick.style.width=0;
            audio.play();
            oPlayOrPause.innerHTML="暂停";
        }
        // 下一曲
        document.getElementById("btn-next").onclick=function(){
                 if (currentIndex == (mlist.length-1)) {
                     currentIndex = 0;
                     document.getElementById("name").innerHTML=mlist[0];
                 } else {
                     currentIndex++;
                     document.getElementById("name").innerHTML=mlist[currentIndex];
                 }
                 audio.src = msrc[currentIndex];
                 stick.style.width=0;
                 audio.play();
                 oPlayOrPause.innerHTML="暂停";
             }
        //播放进度条
            audio.addEventListener('timeupdate',function(){
                if (!isNaN(audio.duration)) {
                    var progressValue = audio.currentTime/audio.duration*200;
                    stick.style.width = parseInt(progressValue) + 'px';
                };
            },false);
        //歌曲结束时
        audio.addEventListener('ended',function(){
            stick.style.width=0;
            oPlayOrPause.innerHTML="播放";
        },false);
        //判断歌曲是否可以播放
        audio.addEventListener('canplay',function(){
            var buffer=document.getElementById("buffer");
            buffer.style.display="none";
        },false);
        //监听歌曲是否缓冲
        audio.addEventListener('loadstart',function(){
            var buffer=document.getElementById("buffer");
            buffer.style.display="block";
            buffer.innerHTML="正在获取数据...";
        },false);
        //初始化
        finit();
    }

在PC端测试会遇到,歌曲无法加载的问题,在移动设备上没事,不知道是什么原因。
本人刚参加工作,还没有什么开发经验,希望能多多交流些经验。
------解决思路----------------------
PC端  chrome亲测可用,lz用的什么浏览器 提示有误?
------解决思路----------------------

------解决思路----------------------
像这种应该整个好看的界面,然后不支持audio的给它整个flash播放器进去,那酸爽……
------解决思路----------------------
document.getElementById("name")   可以换成  queryselector
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2015-03-10 22:35:46
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1195253/
本文WWW.DOC100.NET DOC100.NET版权所有。