h5 自定义简单的音乐播放器

原创 2015年11月20日 08:37:03

       这里实现的播放只有暂停/播放、显示进度条、当前时间、总时长的功能。(暂未封装成插件)

       h5 提供了audio标签,供我们播放音乐资源。其兼容性先不考虑,但就样式而言,并不足以满足我们。我们可以自定义样式。首先,先了解下audio常用的API(可能不全):

  1. play();开始播放音乐
  2. pause();停止播放音乐
  3. played: 属性,表示音乐是否在播放
  4. paused:属性,表示音乐是否停止播放
  5. currentTime:属性,表示音乐播放到哪个时间点
  6. duration:属性,整段音乐的总时长

     一般思路:

  1. 去掉audio的样式属性,同时取消默认的控制栏,这样audio标签在页面上并不占位置。
    <audio src="img/testAudio1.mp3" id="audio" ></audio>
  2. 编辑自定义的播放器界面
    <div id="musicAudio">
        <img id="musicAudioPlayAndPause"  onclick="playOrPaused(this);" src="img/shutdown.ico"/>
        <div id="musicAudioProgressPar">
            <div id="musicAudioProgress"></div>
        </div>
        <p id="musicAudioTime"><span id="currentTime">00:00</span><span>&#47;</span><span id="totalTime">12:00</span></p>
    </div>
    <style type="text/css">
        #musicAudio{
            width:300px;
            height:50px;
            font-size: 0px;
            background-color: #F5F5DC;
            border-radius: 10px;
        }
        #musicAudio *{
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
        }
        #musicAudioPlayAndPause{
            line-height: 50px;
            width:40px;
            height:40px;
            margin:5px 5px;
        }
        #musicAudioTime{
            margin:5px 5px;
        }
        #musicAudioProgress,#musicAudioProgressPar{
            height:25px;
            -webkit-border-radius: 10px;
        }
        #musicAudioProgressPar{
            width:140px;
            background-color: #F0FFFF;
        }
        #musicAudioProgress{
            width:0px;
            background-color: #7FFFD4;
        }
    </style>

这里的思路大概是这样:用img表示播放暂停按钮的图标、进度条主要是由圆角的父DIV和用于改变宽度的子DIV构成,p元素主要是显示时间。

3. js如下:

<script type="text/javascript">
    var audio ;
    window.onload = function(){
        initAudio();
    }
    var initAudio = function(){
        //初始化页面
        document.getElementById("musicAudio").innerHTML=
        "<img id='musicAudioPlayAndPause'  onclick='playOrPaused(this);' src='img/wmp.ico'/>"+
        "<div id='musicAudioProgressPar'>"+
        "<div id='musicAudioProgress'></div>"+
        "</div>"+
        "<p id='musicAudioTime'><span id='currentTime'>00:00</span><span>&#47;</span><span id='totalTime'>12:00</span></p>";
        //初始化对象
        audio = document.getElementById('audio');
        //初始化  当前时间
        getCurrentTime();
        //初始化  总时间
        var totalTime=parseInt(audio.duration/60);
        var seconds=parseInt(audio.duration%60);
        if(totalTime==0){
            if(seconds>9){
                totalTime="00:"+seconds;
            }else{
                totalTime="00:0"+seconds;
            }
        }else{
            var totalTimePre,totalTimeNext;
            if(totalTime>9){
                totalTimePre=totalTime;
            }else{
                totalTimePre="0"+totalTime;
            }
            if(seconds>9){
                totalTimeNext=seconds;
            }else{
                totalTimeNext="0"+seconds;
            }
            totalTime=totalTimePre+":"+totalTimeNext;
        }
        document.getElementById("totalTime").innerText=totalTime;
    }
    //更新进度条当前值
    function updateProgressVal(){
        var progressVal=audio.currentTime/audio.duration*140;
        document.getElementById("musicAudioProgress").style.width=progressVal+"px";
    }
    //更新当前时间
    function getCurrentTime(){
        var currentTime=audio.currentTime;
        var totalTime=parseInt(currentTime/60);
        var seconds=parseInt(currentTime%60);
        if(totalTime==0){
            if(seconds>9){
                totalTime="00:"+seconds;
            }else{
                totalTime="00:0"+seconds;
            }
        }else{
            var totalTimePre,totalTimeNext;
            if(totalTime>9){
                totalTimePre=totalTime;
            }else{
                totalTimePre="0"+totalTime;
            }
            if(seconds>9){
                totalTimeNext=seconds;
            }else{
                totalTimeNext="0"+seconds;
            }
            totalTime=totalTimePre+":"+totalTimeNext;
        }
        document.getElementById("currentTime").innerText=totalTime;
    }
    //暂停或播放
    var progressTimer;
    function playOrPaused(obj){
        if(audio.paused){
            audio.play();
            progressTimer=window.setInterval(audioProgress,100);
            document.getElementById("musicAudioPlayAndPause").setAttribute("src","img/shutdown.ico");
            return;
        }
        audio.pause();
        document.getElementById("musicAudioPlayAndPause").setAttribute("src","img/wmp.ico")
    }

    function audioProgress(){
        if(audio.currentTime <audio.duration){
            if(audio.played){
                //更新当前时间
                getCurrentTime();
                //更新进度条
                updateProgressVal();
            }
        }else{
            clearInterval(progressTimer);
        }
    }
</script>

原生JavaScript+H5实现简单的音乐播放器

刚学了HTML5 的video和audio标签,自己写了一个简单的音乐播放器 可以实现的功能: 1、循环播放 2、下一首和上一首的切换 3、双击音乐播放 由于音乐格式都比较大就不上传了,可以...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

使用H5audio特性实现简单的音乐播放器

成兮音乐浏览器

H5音乐播放器我的2.0

阳光的午后,听着自己播放器传出的音乐,写着一些文字,这是一种享受。今天总结一下自己的播放器2.0相比以前1.0(http://xxyy.ahthw.com//xiaoyu/musicV1.0/Musi...

H5,Audio音乐播放器(移动版)

有些时候,总是感觉自己进步的没有以前快了。于是就怀疑自己是不是也被时间磨灭了,这可真是一件不幸的事儿。可能是自己会的东西太少了,总是有种莫名的危机感。        前一段时间,想写一个移动版音乐播放...

JS实现HTML5音频播放自定义UI

此处首先放一个MDN上关于H5音频播放的文档 使用 HTML5 音频和视频 音频audio标签使用之后是默认带进度条的,所以audio标签中的属性是我们可以定制,选择将其全部隐藏就是了,然后自己实...

HTML5 Audio自定义播放控制

Creating custom video controls var video; window.onload = function() { ...
  • fwwdn
  • fwwdn
  • 2012年12月26日 13:33
  • 6911

html5 audio 自定义播放器

自定义内容包括,播放,暂停,停止,上一首,下一首,进度条显示,进度条拖动并实时显示拖动位置 注:此代码因为有ajax跟服务器的通讯,所以是放在wampsever环境中运行,读者可以自行先替换默认播放的...

简单谈谈如何利用h5实现音频的播放

简单谈谈如何利用h5实现音频的播放

html5音视频播放及CSS效果样式搭配

这几天一直在研究html5环境下样式效果展现问题,htm5的标签更加简洁,结合jquery和bootstrap3,能够很好地做出自己想要的比较绚丽的页面特效。 这里介绍下音视频播放用到的js库: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:h5 自定义简单的音乐播放器
举报原因:
原因补充:

(最多只允许输入30个字)