1. 简介
audio标签是HTML5中新增加的一个标签，它可以让开发者很方便地在网页中嵌入音频，与视频标签一样都是用于音频、视频的播放。使用audio标签可以避免通过Javascript API调用音频，外加HTML5音频元素拥有兼容性强，音质清晰等优点。
2. 基本用法
audio标签的基本用法非常简单。
<audio src="audio.mp3" controls="controls"> </audio>
其中，src属性指定音频文件的地址，controls属性指定是否显示控制面板。上述代码中，控制面板会显示出来，包括音量、进度条和播放/暂停按键等。如果不想显示控制面板，则可以将controls属性的值设为false。
2.1 播放音频
下面是一个简单的例子，实现在点击播放按钮后，播放一首音乐。
<button @click="playAudio">播放</button>
<audio ref="audio" src="./music.mp3"></audio>
<script>
export default {
methods: {
playAudio() {
this.$refs.audio.play();
},
},
};
</script>
在上面的例子中，当点击播放按钮时，会调用playAudio方法，在playAudio方法中，通过$refs引用audio标签，并调用它的play()方法来播放音频。
2.2 暂停音频
停止播放音频也是非常简单的，只需要调用pause()方法即可。
<button @click="pauseAudio">暂停</button>
<audio ref="audio" src="./music.mp3"></audio>
<script>
export default {
methods: {
pauseAudio() {
this.$refs.audio.pause();
},
},
};
</script>
在上面的例子中，当点击暂停按钮时，会调用pauseAudio方法，在pauseAudio方法中，通过$refs引用audio标签，并调用它的pause()方法来暂停音频。
2.3 获取音乐时长
有时我们需要知道某首音乐的时长，以便于进行相关的控制。可以通过duration属性来获取音频的时长，单位为秒。
<span>音乐时长：{{ audioLength }}秒</span>
<audio ref="audio" src="./music.mp3"></audio>
export default {
computed: {
audioLength() {
return parseInt(this.$refs.audio.duration);
},
},
};
</script>
在上面的例子中，通过computed计算属性来获取音乐的时长，duration属性返回音频文件的时长，单位为秒。
2.4 音量控制
音量的控制可以通过volume属性来实现。volume属性的值为0-1之间的值，0表示静音，1表示最大音量，0.5表示一半音量。
<button @click="setVolume">设置音量为50%</button>
<audio ref="audio" src="./music.mp3"></audio>
export default {
methods: {
setVolume() {
this.$refs.audio.volume = 0.5;
},
},
};
</script>
在上面的例子中，点击设置音量为50%按钮后，会调用setVolume方法，通过$refs引用audio标签，并将volume属性的值设置为0.5，即50%音量。
2.5 完整的控制面板
可以通过自定义控制面板来实现更加自由的控制。
<template>
<div>
<span>{{ currentTime }}s / {{ audioLength }}s</span>
<input type="range" v-model="value" max="100" @change="changeValue">
<button @click="playPauseBtn">{{ playPauseBtnText }}</button>
</div>
</template>
<audio ref="audio" src="./music.mp3" @timeupdate="updateTime"></audio>
<style scoped>
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
height: 15px;
width: 15px;
border-radius: 50%;
background: #333333;
margin-top: -5px;
}
input[type='range']::-moz-range-thumb {
-webkit-appearance: none;
height: 15px;
width: 15px;
border-radius: 50%;
background: #333333;
margin-top: -5px;
}
</style>
export default {
data() {
return {
audioLength: 0,
currentTime: 0,
playPauseBtnText: '播放',
value: 0,
};
},
methods: {
playPauseBtn() {
if (this.playPauseBtnText === '播放') {
this.$refs.audio.play();
this.playPauseBtnText = '暂停';
} else {
this.$refs.audio.pause();
this.playPauseBtnText = '播放';
}
},
changeValue(e) {
const val = e.target.value;
this.$refs.audio.currentTime = (val / 100) * this.$refs.audio.duration;
},
updateTime() {
const current = parseInt(this.$refs.audio.currentTime);
if (current !== this.currentTime) {
this.currentTime = current;
}
if (this.currentTime === this.audioLength) {
this.playPauseBtnText = '播放';
}
this.value = (current / this.$refs.audio.duration) * 100;
},
},
computed: {
audioLength() {
return parseInt(this.$refs.audio.duration);
},
},
};
</script>
在上面的例子中，自定义了一个控制面板，包括当前音乐播放的时间、进度条和播放/暂停按钮。其中，@timeupdate事件表示音乐播放过程中的事件，每秒钟触发一次。通过自定义样式美化了进度条，并在changeValue方法中设置音乐的播放时间。
3. 总结
通过上面的讲解，我们学习了audio标签的使用。audio标签不仅可以简单地播放音乐，还可以通过自定义控制面板实现更多的功能。开发者可以通过这些基本的特性，来进行更加复杂的开发。希望本文对您有所帮助。