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>

一步一步实战HTML音乐播放器

在这里我用HTML5从头开始一步一步来制作一个简约的音乐播放器,大家可以参考一下,接下来正式开始。音乐播放器效果播放器分析这里将播放器分两块来做: 视图层(html + css) 逻辑层 ( js )...
  • lecepin
  • lecepin
  • 2017年01月26日 16:07
  • 2768

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

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

HTML5中 audio标签的样式修改

由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比...
  • l333f
  • l333f
  • 2017年03月08日 17:48
  • 4363

HTML5 Audio自定义播放控制

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

H5音频<audio/>样式修改,拖拽、点击进度操作、总时长加载

H5音频自定义样式,拖拽、点击改变进度操作,总时长 during 加载 1>“点击播放”和"点击暂停" 调用原生audio.play() 和 audio.pause()来对进度条进行操作 2>总时长...
  • Candy_home
  • Candy_home
  • 2017年10月30日 14:19
  • 3238

如何在H5页面上添加音乐播放

在制作网页的时候,经常会遇到一些带音乐播放的场景,作品的右上角有一个音频按钮,会播放音乐,点击切换播放和暂停。下面就讲一讲如何在h5网页上添加音乐播放。         其实是很简单的,只需要简单几...
  • yerongtao
  • yerongtao
  • 2017年09月27日 10:39
  • 3346

html5实现的扁平音乐播放器源码

  • 2014年09月23日 14:17
  • 2.1MB
  • 下载

用H5实现简单的MP3MP4的播放

H5实现视频和音乐播放确实比Android简捷多了 首先就是源文件要添加进项目里面,这里我把MP3文件和MP4文件都放在了img文件夹下面, 然后就是代码的实现,其实代码也比较简单的,全都是调...
  • qq_36159785
  • qq_36159785
  • 2017年05月16日 12:44
  • 1000

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

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

h5播放音乐

h5音频播放,里面参数可以查看http://www.w3school.com.cn/html5/html_5_audio.asp Your browser does not suppor...
  • u012011360
  • u012011360
  • 2015年06月03日 18:51
  • 2571
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:h5 自定义简单的音乐播放器
举报原因:
原因补充:

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