最近工作需求需要播放预览一些音乐资源，所以自己写了个控制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. python之jupyter notebook

    jupyter是一种交互式计算和开发环境的笔记,ipython命令行比原生的python命令行更加友好和高效,还可以运行web版的界面,支持多语言,输出图形.音频.视频等功能. 安装 pip inst ...

  2. React中使用遍历

    1.使用for(let item of items){} render(){ var itemList = [] for(let item of items){ itemList.push(<I ...

  3. css3常用样式

    .box{ //改变轴的方向 flex-direction:column; //两端对齐 justify-content:space-between; //换行 flex-wrap: wrap; // ...

  4. 记录旧手机(米6)安装Linux(Ubuntu16.04)踩过的坑

    旧的小米6在抽屉吃灰半年,一直没想好要怎么处理,于是就想着安装Linux. 完整教程来自https://blog.csdn.net/Greepex/article/details/85333027 原 ...

  5. resultMap自定义映射---8.3.1. 解决列名（表中的字段名称）和实体类中的属性名不一致

    1.1.1.1.      步骤一:将驼峰匹配注释掉 --------------测试完成后仍然 回来开启  其他地方可能用到 一旦注释掉驼峰匹配,那么再通过queryUserById查询的结果中,用 ...

  6. 修改虚拟机CentOS系统ip地址和主机名

    按照教程安装了虚拟机但是未配置静态IP,所以导致IP地址经常变化,CRT,mysql等连接时经常出现问题. 所以修改虚拟机内CentOS系统的IP为静态IP. 一.查看当前网关 虚拟机-->[编 ...

  7. goaccess安装和使用

    安装依赖 $ sudo apt-get install libncursesw5-dev $ wget https://github.com/maxmind/geoip-api-c/releases/ ...

  8. Python 学习第一天（二）python 入门

    1.第一个python程序 1.1 直接打印输出 打开cmd,输入python进入到python交互式环境:(看到>>>是在Python交互式环境下:) 在python交互环境下输入 ...

  9. oracle修改已存在数据的字段类型

    第一次使用oracle数据库,在通过Navicat premium工具修改字段类型时,发现报“ORA-01439: column to be modified must be empty to cha ...

  10. 重装maven

    重装原因:换旧版本! 一.直接删除maven文件夹 二.直接删除本地仓库文件 三.删除之前相关的项目(不是必须) 四.下载一个新的,网址 https://maven.apache.org/downlo ...