自制音乐播放器

之前有自定义音乐播放器按钮的需求，便折腾了一下

参考文章：http://www.jzdlink.com/webarticle/css/20161124906.html

主要使用到的控制函数

• play()：加载并播放音频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
• pause()：暂停处于播放状态的音频文件

主要使用到的属性

只读

• ended：如果媒体文件播放完毕，则返回true
• duration：返回音频的长度，单位为s
• paused：如果媒体文件被暂停，则返回true，否则返回false

  读写

• currentTime：设置或返回音频中的当前播放位置，单位为s
• loop：设置音频是否要循环播放，或查询是否已设置为loop
• muted：设置是否静音
• src：音频文件路径
• volume：在0.00到1.00间设置音量值，或查询当前音量值

实现过程中的注意事项

1. muted与volume无联系，当muted设置为true时，volume可不为0
2. 播放结束可用onended事件监控，但在更新进度条时也能实现监控ended，无需多一个监控事件

感想

个性化实现最难的部分就是音量控制条，主要是个人经验欠缺。设计的行为是：更改音量的过程中鼠标移出框外不自动隐藏，松开左键后再判断是否隐藏；从静音切换回有声时还原上次音量。

以下为音量部分代码（仅针对较新版本Chrome，其他浏览器与版本未测试）

// 音量
    // 显示音量条
const showVolume=()=>{
    volumeBackground.style.display='block'
    _outOfVolumeArea=false
}
    // 隐藏音量条
const hideVolume=()=>{
    _changeVolumeStatus?undefined:volumeBackground.style.display='none'
    _outOfVolumeArea=true
}
    // 点击按钮，静音切换
const switchVolume=()=>{
    if(audio.muted){
        volumeDecoration.style.display="none"
        audio.muted=false      
        volumeButton.style.top=(1-_pastVolumeValue)*100+4+'px'
        volumeValue.style.height=(1-_pastVolumeValue)*100+'px'
    }else{
        volumeDecoration.style.display='block'
        audio.muted=true
        volumeButton.style.top='104px'
        volumeValue.style.height='100px'
    }
}
    // 更改音量大小
const handleChangeVolume=(oY,top)=>{
    const Y=window.event.screenY
    if(top+Y-oY>=104){
        volumeDecoration.style.display='block'
        volumeButton.style.top='104px'
        volumeValue.style.height='100px'
        audio.muted=true
        audio.volume=0
    }else{
        volumeDecoration.style.display="none"
        if(top+Y-oY<=4){
            volumeButton.style.top='4px'
            volumeValue.style.height=0
            audio.volume=1
        }else{
            volumeButton.style.top=top+Y-oY+'px'
            volumeValue.style.height=top+Y-oY-4+'px'
            audio.volume=(104-top-Y+oY)/100
        }
        audio.muted=false
    }
}
    // 捕获鼠标位置，控制音量条显示/隐藏
const changeVolumeValue=()=>{
    _changeVolumeStatus=true
    const oY=window.event.screenY
    const top=parseInt(getComputedStyle(volumeButton).top)
    // 封装参数
    const Func=()=>{handleChangeVolume(oY,top)}
    // 不用document监听难以实现效果
    document.addEventListener('mousemove',Func,false)
    // 注册事件，只执行一次
    document.addEventListener('mouseup',recordPastVolumeValue,false,{once:true})
    document.onmouseup=()=>{
        document.removeEventListener('mousemove',Func,false)
        _changeVolumeStatus=false
        _outOfVolumeArea&&hideVolume()      
    }
}
    // 记录上次音量
const recordPastVolumeValue=()=>{
    _pastVolumeValue=audio.volume
}

后记：若有更好方法或者错误欢迎交流，关于DOM事件，可以看这里