最近工作需求需要播放预览一些音乐资源，所以自己写了个控制audio的音乐播放器。

实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制：

1.通过play()、pause()来控制音乐的播放与暂停

2.通过duration、currentTime获取音乐长度及实时播放进度

3.通过volume、muted对音量大小进行调节

4.通过ended、error检测音乐的播放状态

首先来看一下实现效果：当播放点击音乐时该音乐展示播放进度、进度条、音乐条

本例子实际效果（博客园不允许添加audio，所以只能展示样式）：

 
 
05:18
老街
作者: 李荣浩
上传时间: 2019-01-01 12:25:34
收藏量: 5426
推荐 删除
04:03
七友
作者: 梁汉文
上传时间: 2019-01-06 14:32:28
收藏量: 1215
推荐 删除

首先要实现的是音乐的播放与暂停，当点击播放按钮时首先通过对比音乐是否控制当前播放音乐还是更换音乐播放，如果是控制当前音乐则通过play()、paused()进行播放及暂停，如果是更换音乐则先删除原播放进度条及音乐条，然后重新载入进行播放

function playMusic(obj) {

  var musicPlayUrl = musicPlayer.src

  var thisKey = $(obj).data('key')

  clearInterval(musicPlayerTimer)

  $('.music-play').removeClass('current')

  if(musicPlayUrl == thisKey){

    //停止播放音乐

    if(musicPlayer.paused){

      $(obj).parent().parent().addClass('current')

      musicPlayer.play()

      musicPlayerTimer = setInterval(musicPlayProgress,1000)

    }else{

      musicPlayer.pause()

    }

  }else{

    //更换音乐播放

    musicPlayer.src = thisKey

    musicPlayer.play()

    $(obj).parent().parent().addClass('current')

    $('#musicplayer-bar-container,#musicplayer-volume-container,#music-play-time').remove()

    var thisCon = $(obj).parent().parent()

    var musicPlayerBarHtml = `<div class="progress" id="musicplayer-bar-container">

                          <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="music-player-bar">

                          </div>

                      </div>`

    var musicPlayerVolumeHtml = `<div id="musicplayer-volume-container">

                      <div id="musicplayer-volume-bar-container">

                        <div id="musicplayer-volume-bar"></div>

                      </div>

                      <div class="musicplayer-volume-icon">

                        <a href="javascript:;" onclick="muteSetting(this)"><i class="iconfont"></i></a>

                      </div>

                    </div>`

    thisCon.append(musicPlayerBarHtml,musicPlayerVolumeHtml)

    $(obj).parent().parent().find('.music-length').append('<span id="music-play-time"></span>')

  }

}

　　

在播放途中通过duration、currentTime计算当前播放进度并用定时器实时加载进度条，同时通过ended、error检测音乐播放是否出现错误，或者播放完成

// 检测播放进度

function musicPlayProgress(){

    var musicTotalLength = musicPlayer.duration

    var musicCurrentLength = musicPlayer.currentTime

    var musicProgress = (musicCurrentLength / musicTotalLength) * 100 + '%'

    $('#music-play-time').html(timeConversion(musicCurrentLength) + ' / ' + timeConversion(musicTotalLength))

    $('#music-player-bar').css('width',musicProgress)

    if(musicPlayer.ended){

      // 检测是否暂停状态

      $('.music-play').removeClass('current')

    }

    if(musicPlayer.error != null){

      // 检测是否播放错误

      clearInterval(musicPlayerTimer)

      $('.music-play').removeClass('current')

      alert('音乐播放错误！')

    }

}

　　

因为duration、currentTime获取到的单位是秒，所以需要对其进行时间格式的转换

// 时间格式转换

function timeConversion(time){

  var seconds = parseInt(time)   // 秒

  var minutes = 0                // 分

  var hours = 0                  // 小时

  if(seconds > 60) {

      minutes = parseInt(seconds/60);

      seconds = parseInt(seconds%60);

      if(minutes > 60) {

          hours = parseInt(minutes/60);

          minutes = parseInt(minutes%60);

      }

  }

  var result = ''

  if(seconds < 10)

    seconds = '0' + seconds

  if(minutes < 10)

    minutes = '0' + minutes

  if(hours > 0) {

    if(hours < 10)

      hours = '0' + hours

    result = hours + ':' + minutes + ":" + seconds

  }else{

    result = minutes + ":" + seconds

  }

  return result

}

　　

当点击静音按钮时通过muted、volume来设置当前播放的音乐静音状态

// 静音设置

function muteSetting(obj){

  var isHasMute = $(obj).parent().hasClass('mute')

  if(isHasMute){

    // 开启声音

    musicPlayer.muted = false

    musicPlayer.volume = 1

    $(obj).find('i').html('')

    $(obj).parent().removeClass('mute')

    $('#musicplayer-volume-bar').css('height','0%')

  }else{

    // 设置静音

    musicPlayer.muted = true

    $(obj).find('i').html('')

    $(obj).parent().addClass('mute')

    $('#musicplayer-volume-bar').css('height','100%')

  }

}

　　

当用户点击进度条时通过offsetX、offsetY获取到点击到的百分比值，然后对其设置currentTime、volume来进行操作

// 控制进度条

  $('#musicplayer-bar-container').bind('click',function(e){

    var leftDistance = e.offsetX

    var clickProgress = (leftDistance / $(this).width())

    musicPlayer.currentTime = musicPlayer.duration * clickProgress

    $('#music-player-bar').css('width',clickProgress * 100 + '%')

  })

  // 控制音量

  $('#musicplayer-volume-bar-container').bind('click',function(e){

    var topDistance = e.offsetY

    var clickProgress = (topDistance / $(this).height())

    musicVolume = 1 - clickProgress

    musicPlayer.volume = musicVolume

    $('#musicplayer-volume-bar').css('height', clickProgress * 100 + '%')

    if(musicVolume > 0){

      musicPlayer.muted = false

      $('.musicplayer-volume-icon').find('i').html('')

      $('.musicplayer-volume-icon').removeClass('mute')

    }

  })

　　

完成上面的操作就做好了~

布局样式就不多说了~直接上代码，项目中我用了bootstrap，例子就大体实现布局就可以了，具体样式自己去调整~以下是完整的html、css、js代码：

<style>

.music-head-wrap{display: flex;align-items: center;overflow: hidden;}

.music-head{width: 5rem;height: 5rem;-webkit-border-radius: 2.5rem;-moz-border-radius: 2.5rem;-ms-border-radius: 2.5rem;border-radius: 2.5rem;overflow: hidden;position: relative;margin: 1.8rem 1rem 0 1rem;}

  .music-head-img{position: relative;width: 100%;height: 100%;-webkit-border-radius: 2.5rem;-moz-border-radius: 2.5rem;-ms-border-radius: 2.5rem;border-radius: 2.5rem;overflow: hidden;}

  .music-head .music-head-img img{width: 100%;height: auto;min-height: 5rem;}

  .music-head a{display: flex;width: 100%;height: 100%;align-items:center;justify-content: center;position: absolute;left: 0;top: 0;background: rgba(0, 0, 0, .5);color: rgba(255, 255, 255, .6);font-size: 2.5rem;-webkit-border-radius: 2.5rem;-moz-border-radius: 2.5rem;-ms-border-radius: 2.5rem;border-radius: 2.5rem;overflow: hidden;}

  .music-play.current .music-head-img{-webkit-animation: musicplay 10s infinite linear;-moz-animation: musicplay 10s infinite linear;-ms-animation: musicplay 10s infinite linear;-o-animation: musicplay 10s infinite linear;animation: musicplay 10s infinite linear;}

  .music-head .icon-play{display: none;}

  .music-play.current .icon-stop{display: none;}

  .music-play.current .icon-play{display: block;}

  .music-length{font-size: .8rem;line-height: 2rem;text-align: center;}

  #music-play-time{display: none;}

  .music-play.current .music-length span{display: none;}

  .music-play.current .music-length span#music-play-time{display: block;}

.music-list{width: 100%;height: auto;overflow: hidden;}

.musiclist-wrap{width: 31.33%;height: 10rem;background: #fff;float: left;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;border-radius: 5px;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);display: flex;box-sizing: border-box;margin: 0 1% 1.5rem 1%;position: relative;}

  .music-info{max-width: 70%;}

  .music-info-name{font-size: 1.5rem;white-space: nowrap;padding: .8rem 0 .2rem 0;text-overflow: ellipsis;overflow: hidden;}

  .music-info-author,.music-info-uploadtime,.music-info-collection,.music-info-operation{font-size: .8rem;white-space: nowrap;}

#musicplayer-bar-container{position: absolute;bottom: 0;left: 0;width: 100%;height: .5rem;background: #eee;}

  #musicplayer-bar-container:hover{cursor: pointer;}

  #musicplayer-bar-container .progress-bar{transition-duration:.3s;background: #00bcd4;position: absolute;left: 0;top: 0;height: 100%;}

#musicplayer-volume-container{width: 1.2rem;height: 8rem;position: absolute;right: .2rem;bottom: .6rem;}

  #musicplayer-volume-bar-container{width: 30%;height: 6.5rem;position: relative;background: #00bcd4;border-radius: 3px;overflow: hidden;margin: 0 auto;cursor: pointer;display: none;}

  #musicplayer-volume-bar{background: #eee;position: absolute;left: 0;top: 0;width: 100%;-webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;transition: .3s;height: 0%;}

  #musicplayer-volume-container:hover #musicplayer-volume-bar-container{display: block;}

  .musicplayer-volume-icon{position: absolute;left: 0;bottom: 0;width: 100%;}

  .musicplayer-volume-icon a{color: #666;}

@media screen and (max-width:1500px){

  .music-list .musiclist-wrap{width: 48%;}

}

@media screen and (max-width:830px){

  .music-list .musiclist-wrap{width: 100%;margin: 0 0 1.5rem 0;}

}

@media screen and (max-width:575.98px){

  .music-list .musiclist-wrap{align-items: center;justify-content: center;height: auto;padding-bottom: .5rem;flex-direction: column;}

  .music-info{max-width: 90%;}

  .music-head{margin: 1rem 1rem 0 1rem;}

}

@-webkit-keyframes musicplay{

  100%{-webkit-transform: rotate(360deg)}

}

@-moz-keyframes musicplay{

  100%{-moz-transform: rotate(360deg)}

}

@-ms-keyframes musicplay{

  100%{-ms-transform: rotate(360deg)}

}

@keyframes musicplay{

  100%{transform: rotate(360deg)}

}

</style>

<div class="music-list">

	<div class="musiclist-wrap">

      <div class="music-play">

        <div class="music-head">

          <div class="music-head-img">

            <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3226503153,2830890507&fm=58&bpow=406&bpoh=547" alt="李荣浩">

          </div>

          <a href="javascript:;" data-key="http://fs.w.kugou.com/201901051629/59234ca6f07a9269c2d092b00a8d9d5e/G002/M00/0C/00/Qg0DAFS9_KSAf3uhAE3fmiiZ_Zw419.mp3" onclick="playMusic(this)" class="music-head-mask">

            <i class="iconfont icon-play"></i>

            <i class="iconfont icon-stop"></i>

          </a>

        </div>

        <div class="music-length text-center">

          <span id="music-play-time"></span>

          <span>05:18</span>

        </div>

      </div>

      <div class="music-info">

        <div class="music-info-name" title=" 老街 ">

           老街

        </div>

        <div class="music-info-author">

          <i class="iconfont"></i> 作者:  李荣浩

        </div>

        <div class="music-info-uploadtime">

          <i class="iconfont"></i> 上传时间:  2019-01-01 12:25:34

        </div>

        <div class="music-info-collection">

          <i class="iconfont"></i> 收藏量:  5426

        </div>

        <div class="music-info-operation">

          <button type="button" rel="tooltip" class="btn btn-info btn-sm" title="推荐"><i class="iconfont"></i> 推荐</button>

          <button type="button" rel="tooltip" class="btn btn-danger btn-sm" title="删除"><i class="iconfont"></i> 删除</button>

        </div>

      </div>

  </div>

  <div class="musiclist-wrap">

      <div class="music-play">

        <div class="music-head">

          <div class="music-head-img">

            <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3002163596,2541880871&fm=58&bpow=591&bpoh=533" alt="梁汉文">

          </div>

          <a href="javascript:;" data-key="http://fs.w.kugou.com/201901101638/33cc235a3fa9bb700282204c1c756767/G009/M04/09/19/SQ0DAFUEYFGAKkx6AD7Zs5WkFBw579.mp3" onclick="playMusic(this)" class="music-head-mask">

            <i class="iconfont icon-play"></i>

            <i class="iconfont icon-stop"></i>

          </a>

        </div>

        <div class="music-length text-center">

          <span id="music-play-time"></span>

          <span>04:03</span>

        </div>

      </div>

      <div class="music-info">

        <div class="music-info-name" title=" 七友 ">

           七友

        </div>

        <div class="music-info-author">

          <i class="iconfont"></i> 作者:  梁汉文

        </div>

        <div class="music-info-uploadtime">

          <i class="iconfont"></i> 上传时间:  2019-01-06 14:32:28

        </div>

        <div class="music-info-collection">

          <i class="iconfont"></i> 收藏量:  1215

        </div>

        <div class="music-info-operation">

          <button type="button" rel="tooltip" class="btn btn-info btn-sm" title="推荐"><i class="iconfont"></i> 推荐</button>

          <button type="button" rel="tooltip" class="btn btn-danger btn-sm" title="删除"><i class="iconfont"></i> 删除</button>

        </div>

      </div>

  </div>

</div>

<audio controls="controls" style="display: none" id="music-player">

  Your browser does not support the audio element.

</audio>

<script src="http://127.0.0.1:8080/assets/js/core/jquery.min.js"></script>

<script>

var musicPlayer = document.getElementById('music-player')

var musicPlayerTimer

function playMusic(obj) {

  var musicPlayUrl = musicPlayer.src

  var thisKey = $(obj).data('key')

  clearInterval(musicPlayerTimer)

  $('.music-play').removeClass('current')

  if(musicPlayUrl == thisKey){

    //停止播放音乐

    if(musicPlayer.paused){

      $(obj).parent().parent().addClass('current')

      musicPlayer.play()

      musicPlayerTimer = setInterval(musicPlayProgress,1000)

    }else{

      musicPlayer.pause()

    }

  }else{

    //更换音乐播放

    musicPlayer.src = thisKey

    musicPlayer.play()

    $(obj).parent().parent().addClass('current')

    $('#musicplayer-bar-container,#musicplayer-volume-container,#music-play-time').remove()

    var thisCon = $(obj).parent().parent()

    var musicPlayerBarHtml = `<div class="progress" id="musicplayer-bar-container">

                          <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="music-player-bar">

                          </div>

                      </div>`

    var musicPlayerVolumeHtml = `<div id="musicplayer-volume-container">

                      <div id="musicplayer-volume-bar-container">

                        <div id="musicplayer-volume-bar"></div>

                      </div>

                      <div class="musicplayer-volume-icon">

                        <a href="javascript:;" onclick="muteSetting(this)"><i class="iconfont"></i></a>

                      </div>

                    </div>`

    thisCon.append(musicPlayerBarHtml,musicPlayerVolumeHtml)

    $(obj).parent().parent().find('.music-length').append('<span id="music-play-time"></span>')

    musicPlayerTimer = setInterval(musicPlayProgress,1000)

  }

  // 控制进度条

  $('#musicplayer-bar-container').bind('click',function(e){

    var leftDistance = e.offsetX

    var clickProgress = (leftDistance / $(this).width())

    musicPlayer.currentTime = musicPlayer.duration * clickProgress

    $('#music-player-bar').css('width',clickProgress * 100 + '%')

  })

  // 控制音量

  $('#musicplayer-volume-bar-container').bind('click',function(e){

    var topDistance = e.offsetY

    var clickProgress = (topDistance / $(this).height())

    musicVolume = 1 - clickProgress

    musicPlayer.volume = musicVolume

    $('#musicplayer-volume-bar').css('height', clickProgress * 100 + '%')

    if(musicVolume > 0){

      musicPlayer.muted = false

      $('.musicplayer-volume-icon').find('i').html('')

      $('.musicplayer-volume-icon').removeClass('mute')

    }

  })

}

// 检测播放进度

function musicPlayProgress(){

    var musicTotalLength = musicPlayer.duration

    var musicCurrentLength = musicPlayer.currentTime

    var musicProgress = (musicCurrentLength / musicTotalLength) * 100 + '%'

    $('#music-play-time').html(timeConversion(musicCurrentLength) + ' / ' + timeConversion(musicTotalLength))

    $('#music-player-bar').css('width',musicProgress)

    if(musicPlayer.ended){

      // 检测是否暂停状态

      $('.music-play').removeClass('current')

    }

    if(musicPlayer.error != null){

      // 检测是否播放错误

      clearInterval(musicPlayerTimer)

      $('.music-play').removeClass('current')

      alert('音乐播放错误！')

    }

}

// 静音设置

function muteSetting(obj){

  var isHasMute = $(obj).parent().hasClass('mute')

  if(isHasMute){

    // 开启声音

    musicPlayer.muted = false

    musicPlayer.volume = 1

    $(obj).find('i').html('')

    $(obj).parent().removeClass('mute')

    $('#musicplayer-volume-bar').css('height','0%')

  }else{

    // 设置静音

    musicPlayer.muted = true

    $(obj).find('i').html('')

    $(obj).parent().addClass('mute')

    $('#musicplayer-volume-bar').css('height','100%')

  }

}

// 时间格式转换

function timeConversion(time){

  var seconds = parseInt(time)   // 秒

  var minutes = 0                // 分

  var hours = 0                  // 小时

  if(seconds > 60) {

      minutes = parseInt(seconds/60);

      seconds = parseInt(seconds%60);

      if(minutes > 60) {

          hours = parseInt(minutes/60);

          minutes = parseInt(minutes%60);

      }

  }

  var result = ''

  if(seconds < 10)

    seconds = '0' + seconds

  if(minutes < 10)

    minutes = '0' + minutes

  if(hours > 0) {

    if(hours < 10)

      hours = '0' + hours

    result = hours + ':' + minutes + ":" + seconds

  }else{

    result = minutes + ":" + seconds

  }

  return result

}

</script>

　　

自定义css样式结合js控制audio做音乐播放器的更多相关文章

  1. C#做音乐播放器时在自动下一曲中报异常的解决办法

    ---------------------- ASP.Net+Unity开发..Net培训.期待与您交流! ---------------------- 在利用Media Player做音乐播放器的时 ...

  2. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. iOS－自定义Model转场动画－仿酷我音乐播放器效果

    周末,闲来无事,仿写了酷我音乐播放器效果: 效果图如下: 实现思路: 1.实现手势处理视图旋转 2.自定义Model动画: 1.手势是利用了一个UIPanGestureRecognizer手势: 注意 ...

  4. 用mciSendString做音乐播放器

    音乐操作类 public class clsMCI { public clsMCI() { // // TODO: 在此处添加构造函数逻辑 // } //定义API函数使用的字符串变量 [Marsha ...

  5. Vuejs---《Vue.js + Node.js-构建音乐播放器新玩法-video》

    官方文档:http://vuejs.org/v2/guide/syntax.html 中文文档: https://cn.vuejs.org/v2/guide/syntax.html https://g ...

  6. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  7. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  8. Github上html页面(包括CSS样式和JS效果)如何显示出来

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  9. HTML5 - 使用JavaScript控制<audio>音频的播放

    有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效.   1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...

随机推荐

  1. vue2.0+按需引入element-ui报错

    项目使用vue脚手架自动生成的,vue版本为^2.5.16.项目中需要按需使用element-ui,根据element-ui的官方文档,一开始在babel.config.js文件中修改配置 modul ...

  2. kali工具的总结

    由于篇幅有限,只列举部分,ps:第一次发有什么不对的 还望各位大大指正 nc 瑞士军刀 [v1.10-41] 使用格式: nc [-参数] 主机名 端口[s] [端口] … 侦听入站: nc -l - ...

  3. 《python解释器源码剖析》第4章--python中的list对象

    4.0 序 python中的list对象,底层对应的则是PyListObject.如果你熟悉C++,那么会很容易和C++中的list联系起来.但实际上,这个C++中的list大相径庭,反而和STL中的 ...

  4. Jumpserver1.4.1安装

    第1章 CentOS环境准备 Jumpserver官网: http://docs.jumpserver.org/zh/docs/step_by_step.html 测试推荐硬件 CPU: 64位双核处 ...

  5. angular打印功能实现方式

    目前主流的前端打印方式有两种:一种是使用浏览器打印功能直接打印页面,另一种是调用本地控件实现.浏览器打印功能单一,不适用于复杂的业务表单,而打印控件可以设计打印模板,实现复杂表单的打印,十分适合复杂的 ...

  6. C#微信公众平台账号开发真正给初学者的文章

    微信越来越受到大众人群的喜爱,但是对于开发人员来说刚接触肯能还是一头雾水的,比如像我,看了三四天文档感觉要吐,但是程序还是要写知识还是要学.发现了一个比较适合初学者的文章送给大家,废话到此:(转贴吧) ...

  7. php is_numeric函数可绕过产生SQL注入

    老老实实mysql_real_escape_string()防作死......is_numeric的SQL利用条件虽然有点苛刻,但还是少用的好= = 某CTF中亦有实测案例,请戳 http://dro ...

  8. [APIO2010] 算法竞赛竞赛经典 巡逻

    原题链接 题目描述 在一个地区有 n 个村庄,编号为1,2,-,n. 有 n-1 条道路连接着这些村庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通过这些道路到达其他任一个村庄. 每条道路的长度 ...

  9. Mike and Feet CodeForces - 548D （单调栈）

    Mike is the president of country What-The-Fatherland. There are n bears living in this country besid ...

  10. 【CF335 E】Counting Skyscrapers

    题意 有一排高楼,每一栋高楼有一个正整数高度,高度为 \(i\) 的概率为 \(2^{-i}\).一栋楼的每层从下往上依次编号为 \(0,1,2,\cdots,i-1\). 为了出题,大楼之间安装了溜 ...