一、概述
因项目要求,需要做一个音频播放器。
二、demo
test.vue
<template>
<div>
<img src="../assets/audio-bg.png" alt="">
<br>
<!-- 此处的ref属性,可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 -->
<audio ref="audio"
@pause="onPause"
@play="onPlay"
@timeupdate="onTimeupdate"
@loadedmetadata="onLoadedmetadata"
src="https://wdd.js.org/element-audio/static/falling-star.mp3"
controls="controls">
</audio>
<!-- 音频播放控件 -->
<!-- <div>-->
<!-- <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>-->
<!-- <el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>-->
<!-- <el-tag type="info">{{ audio.maxTime | formatSecond}}</el-tag>-->
<!-- </div>-->
</div>
</template>
<script>
// 将整数转换成 时:分:秒的格式
function realFormatSecond(second) {
var secondType = typeof second
if (secondType === 'number' || secondType === 'string') {
second = parseInt(second)
var hours = Math.floor(second / 3600)
second = second - hours * 3600
var mimute = Math.floor(second / 60)
second = second - mimute * 60
return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
} else {
return '0:00:00'
}
}
export default {
data () {
return {
audio: {
// 该字段是音频是否处于播放状态的属性
playing: false,
// 音频当前播放时长
currentTime: 0,
// 音频最大播放时长
maxTime: 0
}
}
},
methods: {
// 控制音频的播放与暂停
startPlayOrPause () {
return this.audio.playing ? this.pause() : this.play()
},
// 播放音频
play () {
this.$refs.audio.play()
},
// 暂停音频
pause () {
this.$refs.audio.pause()
},
// 当音频播放
onPlay () {
this.audio.playing = true
},
// 当音频暂停
onPause () {
this.audio.playing = false
},
// 当timeupdate事件大概每秒一次,用来更新音频流的当前播放时间
onTimeupdate(res) {
console.log('timeupdate')
console.log(res)
this.audio.currentTime = res.target.currentTime
},
// 当加载语音流元数据完成后,会触发该事件的回调函数
// 语音元数据主要是语音的长度之类的数据
onLoadedmetadata(res) {
console.log('loadedmetadata')
console.log(res)
this.audio.maxTime = parseInt(res.target.duration)
}
},
filters: {
// 使用组件过滤器来动态改变按钮的显示
transPlayPause(value) {
return value ? '暂停' : '播放'
},
// 将整数转化成时分秒
formatSecond(second = 0) {
return realFormatSecond(second)
}
}
}
</script>
<style>
</style>
注意:这里有一张背景图片,大家可以从百度中下载。
效果如下:
这里的功能有几个:开始/暂停,显示音频时长,设置音量大小,设置播放倍数。
关于更多代码的解释,请查看下面的参考链接,里面有详细的描述,这里就不在叙述了。
本文参考链接: