自定义css样式结合js控制audio做音乐播放器

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

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

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

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

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

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

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

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

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

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

function playMusic(obj) {var musicPlayUrl = musicPlayer.srcvar 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 = thisKeymusicPlayer.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:;" οnclick="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.durationvar musicCurrentLength = musicPlayer.currentTimevar 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' + secondsif(minutes < 10)minutes = '0' + minutesif(hours > 0) {if(hours < 10)hours = '0' + hoursresult = hours + ':' + minutes + ":" + seconds}else{result = minutes + ":" + seconds}return result}

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

// 静音设置function muteSetting(obj){var isHasMute = $(obj).parent().hasClass('mute')if(isHasMute){// 开启声音musicPlayer.muted = falsemusicPlayer.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.offsetXvar 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.offsetYvar clickProgress = (topDistance / $(this).height())musicVolume = 1 - clickProgressmusicPlayer.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代码：