IFE-仿豆瓣音乐播放器

任务目的

● 练习综合运用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)播放完成后触发。
具体语法和使用，可以查看参考链接

遇到的问题

1. 困惑进度条和音量条效果实现？
   解决：点击事件返回的事件对象里包含鼠标指针的水平坐标的属性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

仿豆瓣音乐播放器

参考链接

1. HTML 音频/视频 DOM 参考手册
2. HTML DOM Audio 对象
3. 图解 event.offsetX，event.clientX，event.pageX，event.screenX属性

---