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样式
<input type=“range” style=“padding: 0; margin: 0;width: 100%;”
v-model=“sliderTime” min=“0” max=“100” @change=“changeCurrentTime”>
<audio id=“audio-1” :src=“song.musicUrlAudio” ref=“audio” autoplay=“autoplay” οnended=“nextMusic()”
@pause=“onPause”
@play=“onPlay”
@timeupdate=“onTimeupdate”
@loadedmetadata=“onLoadedmetadata” >
左右两边的时间怎么获得呢?
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
源码:
<input type=“range” style=“padding: 0; margin: 0;width: 100%;”
v-model=“sliderTime” min=“0” max=“100” @change=“changeCurrentTime”>
<img width=“30px;” height=“auto” id=“preBtn” src=“images/pre1.png” alt=“” @click=“preMusic” />
<img width=“30px;” height=“auto” id=“playBtn” :src=“audio.playing ? ‘images/play1.png’ : ‘images/pause1.png’” alt=“” @click=“startPlayOrPause” />
<img width=“30px;” height=“auto” id=“nextBtn” src=“images/next1.png” alt=“” @click=“nextMusic” />
<audio id=“audio-1” ref=“audio” autoplay=“autoplay” controls src=“http://192.168.188.1:8000/nwmsucms/music/musicfile_7295697c-04a0-47a3-8b74-b299192a86b6.mp3”
@pause=“onPause”
@play=“onPlay”
@timeupdate=“onTimeupdate”
@loadedmetadata=“onLoadedmetadata”
@ended=“nextMusic”>