audio示例-基于Vue的一个小项目（上传音乐链接）

1 标签定义声音，比如音乐或其他音频流。
2 设置为自动播放的 audio 元素：autoplay=“autoplay”
但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)

3 audio不单单是个标签 他也是window下的一个对象，对象就有属性和方法，作为对象他有哪些常用的方法呢

对象属性：
currentTime 获取当前播放时间
duration 获取歌曲的总时间
play 是否在播放 返回true/false
pause 是否暂停 返回true/false
对象方法：
play() 播放歌曲
pause() 暂停歌曲
load()重新加载歌曲

4 onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。
视频/音频（audio/video）的元数据包含: 时长，尺寸大小（视频），文本轨道。
视频/音频（audio/video）在加载过程中，触发的顺序如下：

onloadstart
ondurationchange
onloadedmetadata
onloadeddata
onprogress
oncanplay
oncanplaythrough

https://www.cnblogs.com/leinov/p/3896772.html

https://segmentfault.com/a/1190000015805754

例子：用Vue写出如下样式

解析：
1 先写出HTML样式

左右两边的时间怎么获得呢?
v-text不解释标签,也就是直接输出获取的数据，v-text使用过滤器，通过$options.filters进行使用
v-text如何使用filters：https://jingyan.baidu.com/article/e52e36151dae2040c60c51f0.html

filters: {
	formatSecond(second = 0) {
      	return realFormatSecond(second);
    }
}

// 将整数转换成 时：分：秒的格式
function realFormatSecond(second) {
  	var secondType = typeof second
  	if (secondType === 'number' || secondType === 'string') {
	    second = parseInt(second)
	    var mimute = Math.floor(second / 60)
	    second = second - mimute * 60
	    return ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
  	} else {
	    return '00:00'
  	}
}

Vue的method方法里面

// 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
onTimeupdate(res) {
  	this.audio.currentTime = res.target.currentTime;
  	this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100);			      	
},
onLoadedmetadata(res) {
	console.log(this)
	console.log(res)
  	this.audio.maxTime = parseInt(res.target.duration);
},
changeCurrentTime() {
  	this.$refs.audio.currentTime = parseInt(this.sliderTime / 100 * this.audio.maxTime)
},

打印出的this

audio.currentTime=> 打印 res.target.duration通过parseInt转化为整数就是整首歌的时长

那，最左边的那个时间怎么变化，那个滑竿怎么跟着变呢？
过滤器里面返回了这个函数：realFormatSecond

解决进度条：
http://www.cnblogs.com/lalalagq/p/9961959.html
https://blog.csdn.net/fgdfgasd/article/details/82152482?utm_source=blogxgwz5

源码：