audio标签详解（属性+js操作+生命周期+播放事件）

菜鸡不敢说自己菜鸡

已于 2023-08-11 14:08:46 修改

阅读量7.5k

点赞数 4

分类专栏： # vue项目开发遇到的问题文章标签： javascript 前端开发语言

于 2023-07-25 16:50:57 首次发布

本文链接：https://blog.csdn.net/qq_54896194/article/details/131921261

版权

vue项目开发遇到的问题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5中的<audio/>标签，包括支持的音频格式（mp3,wav,ogg），各种属性如src,controls,autoplay,loop,preload的用法，以及JavaScript操作音频的方法如currentTime,duration,volume等。同时，文章还提及了audio加载的生命周期和播放事件，以及解决.m4a文件播放问题的策略。

摘要由CSDN通过智能技术生成

<audio/>标签详解

用来展示音频文件。目前支持的三种音频格式文件：mp3,wav和ogg;

音频格式及浏览器支持

在这里插入图片描述

属性:

src:用来指定音乐的路径。

<audio src=""/>

controls:用来显示是否显示默认的音乐面板。

<audio src="" controls/>
<audio src="" controls="controls"/>

autoplay:页面加载时自动播放音频(现在已被大部分浏览器废弃，只有页面有点击操作以后才能播放音频文件)
loop:存在此属性则开启循环播放。

<audio src="" controls loop/>

preload:设定音频的预加载方式
=“auto”:自动加载，页面加载后载入整个音频；
=“metadata”:自动加载，页面加载后只载入源数据；
=“none”:不自动加载。
！！！手机端的preload会被无视。

<audio src="" controls loop preload="none"/>

js操作(注释部分是解释，没注释部分是使用方法):

<body>
		<audio src="audio.mp3" controls loop preload="none" id="audioTag"/>
	</body>
	<script>
	// 拿到audio标签
	var audioTag=document.getElementById("audioTag");
	//currentTime:获取当前播放时间，单位是秒s，可读可写
	console.log(audioTag.currentTime);
	//duration:音频总时长，单位是秒s，注意在load()方法之前,duration的值是NaN，只读
	console.log(audioTag.duration);
	//volume:音量，返还当前音量，最小是0，最大是1。可读可写
	audioTag.volumn+=0.1;
	//playbackRate:播放速率,返还播放速度，值是速度的倍率门最大播放速度根据内核的不同而有所不同，正常来说2倍够用了。可读可写
	audioTag.playbackRate=2;
	//play():播放音频,由于autoplay()被取消以后，有的同学可能会想在window.onload里面用play(),但是不行哦，会报错。现在强制要求用户与页面互动之后才能播放音频文件哦~
	audioTag.play();
	//pause():暂停正在播放的音乐
	audioTag.pause();
	//load():设置preload的属性值
	audioTag.load("none");
	</script>

audio加载的生命周期:

<script>
	audioTag.addEventListener('loadstart',function(){//事件});
</script>

loadstart:开始加载；
durationchange:时长改变；
loadedmetadata:源数据加载完毕；
loadeddata:数据开始加载；
progress:加载中；
canplay:音频可以播放的状态；
canplaythrough:可以播放整个音频，音频播放加载完全完成了；

播放事件:

timeupdate:时间更新，指的是currentTime,最频繁的是“每250毫秒触发一次”;
waiting:等待中，由于没有数据而导致展厅时播放；
playing:播放中，从waiting状态转换到可以播放的状态时触发；
play:播放，play()方法被调用时触发；
pause:暂停，pause()方法被调用时触发；
ended:结束，音频播放完毕后触发；
volumechange:音量改变;