IFE-仿豆瓣音乐播放器
2017-05-26 本文已影响56人
朋友喜欢叫我春哥
任务目的
● 练习综合运用HTML、CSS、JavaScript实现功能
● 熟悉 html5 audio 使用
● 应用的整体架构设计
通过调用html5 audio的属性和方法来实现对音频的控制
大致了解了一下，其实基本上音频和视频的DOM接口是大致相同的。
属性
-
controls
指定音频是否显示控件。
true - 指定显示控件。
false - 默认。指定不显示控件。 -
currentTime
设置或返回当前音频播放位置（单位秒）
该属性的样式实现自定义进度条的关键所在，因为它控制音频的播放位置。
返回 currentTime 属性：
audioObject.currentTime
设置 currentTime 属性：
audioObject.currentTime=seconds
-
duration
属性返回当前音频的长度，以秒计。
自定义进度条需要改属性的配合，因为通过当前播放秒数和总秒数的比例，可以得出当前播放的进度比例，例如1/4 = 25%，那么控制进度条的长度为总长度的25%。 -
ended
只读属性，音频播放结束，返回true,否则false.
这个属性可以用来判断播放结束后，进行一些动作 -
loop
音频播放结束后，是否重复播放，
true - 重复播放
false - (默认) 不重复播放 -
paused
当前播放是否暂停，通过该属性可以控制播放和暂停的状态切换
true - 音频播放暂停
false - 音频播放未暂停 -
src
设置或返回当前音频的来源
返回 src 属性：
audioObject.src
设置 src 属性：
audioObject.src=URL
当然audio 对象还有其他许多属性，只是针对目前的项目需要用到就这些，其他针对自己需求而考虑是否采用
方法
我只是用到播放和暂停，当然还有其他方法，如有兴趣可以查看参考链接。
audio|video.play()
audio|video.pause()
事件
这个就拥有很多的事件，基本都是在音频状态改变是来触发动作的条件。例如：ended 事件在音频/视频(audio/video)播放完成后触发。
具体语法和使用，可以查看参考链接
遇到的问题
- 困惑进度条和音量条效果实现？
解决：点击事件返回的事件对象里包含鼠标指针的水平坐标的属性offsetX，offsetX 除去 元素总长度得出比例，利用该比例从而设置播放位置（obj.duration * scale）改变进度条的长度。
//总长度
let length = document.querySelector('.fm-controls_center').clientWidth,
targetWidth = event.offsetX; //点击位置
let scale = targetWidth / length; //比例
audios.currentTime = audios.duration * scale; //设置音频位置
鼠标事件对象的坐标
项目GitHub
参考链接
