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

本文介绍了如何使用Vue创建一个基于audio标签的小项目，涉及自动播放、audio对象属性与方法的使用，以及音频加载和播放事件。讨论了如何获取和显示音频的播放时间、总时长，并探讨了进度条的实现方法。提供了相关资源链接以供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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样式

<!-- 时间轴 -->
<div id="musicSlider">
	<div style="width: 15%; float: left;">
		<label v-text="$options.filters.formatSecond(audio.currentTime)"></label>
	</div>
	<div style="width: 70%; float: left;">
		<input type="range" style="padding: 0; margin: 0;width: 100%;" 
			v-model="sliderTime" min="0" max="100" @change="changeCurrentTime">
	</div>
	<div style="width: 15%; float: left;">
		<label v-text="$options.filters.formatSecond(audio.maxTime)"></label>
	</div>
</div>

<!-- 歌曲信息 -->
<div id="audioInfo">
	<audio id="audio-1" :src="song.musicUrlAudio" ref="audio"  autoplay="autoplay"  onended="nextMusic()"
		@pause="onPause"
		@play="onPlay"
		@timeupdate="onTimeupdate"
		@loadedmetadata="onLoadedmetadata" >
	</audio>
</div>

左右两边的时间怎么获得呢?
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(re