Aduio标签

最新推荐文章于 2022-07-23 10:49:53 发布

夜雨听萧瑟

最新推荐文章于 2022-07-23 10:49:53 发布

阅读量516

点赞数

分类专栏：前端

转载请注明文章出处，否则不得转载！

本文链接：https://blog.csdn.net/hanxiaoyong_/article/details/107894180

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

定义：

<audio> 标签定义声音，如音乐或其他音频流，支持的3种文件格式：MP3、Wav、Ogg。

Audio 对象属性如下：

具体可参考https://www.w3school.com.cn/jsref/dom_obj_audio.asp

属性	描述
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
controller	返回表示音频当前媒体控制器的 MediaController 对象。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
defaultMuted	设置或返回音频默认是否静音。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。
error	返回表示音频错误状态的 MediaError 对象。
loop	设置或返回音频是否应在结束时再次播放。
muted	设置或返回是否关闭声音。
networkState	返回音频的当前网络状态。
paused	设置或返回音频是否暂停。
played	返回表示音频已播放部分的 TimeRanges 对象。
preload	设置或返回音频的 preload 属性的值。
readyState	返回音频当前的就绪状态。
src	设置或返回音频的 src 属性的值。
volume	设置或返回音频的音量。

常用的事件：

事件名称	事件作用
loadstart	客户端开始请求数据
progress	客户端正在请求数据，缓冲
play
pause
ended
timeupdate	当前播放时间发生改变的时候
canplaythrough	歌曲已经载入完全
canplay	缓冲至目前可播放的状态

事件对应链接:

onloadstart ondurationchange onloadedmetadata onloadeddata onprogress oncanplay oncanplaythrough

影响多媒体加载的事件有:

onemptied onerror onstalled onsuspend

1、简单加载音频 demo:

<!DOCTYPE HTML>
<html>
<body>

<audio src="./3.mp3" controls="controls">
Your browser does not support the audio element.
</audio>

</body>
</html>

2、创建 <audio> 元素方法：

（1）可以通过使用 document.createElement() 方法来

<!DOCTYPE html>
<html>
<body>

<h3>Create AUDIO 元素</h3>



<button onclick="myFunction()">试一下</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x = document.createElement("AUDIO");
x.setAttribute("src", "a.mp3");
x.setAttribute("controls", "controls");
document.body.appendChild(x);
document.getElementById("demo").innerHTML = "<b>注释：</b>IE 和 Safari 不支持 .ogg 文件格式。这只是一个例子。如需使其在所有浏览器中运行，您应该在 audio 元素中使用 source 元素。";
}
</script>

</body>
</html>

（2）创建Aduio元素方法：

<p>击按钮来创建 AUDIO 元素</p>
 
<button onclick="myFunction()">试一下</button>
 
<p id="demo"></p>
<p id="demo1"></p>
 
<script>
function myFunction()
{
  var myaudio=new Audio();
  myaudio.src="/i/horse.mp3";
  myaudio.controls= "controls"
  myaudio.autoplay = true;
document.body.appendChild(myaudio);
document.getElementById("demo").innerHTML = "<b>注释：</b>IE 和 Safari 不支持 .ogg 文件格式。这只是一个例子。如需使其在所有浏览器中运行，您应该在 audio 元素中使用 source 元素。";
debugger
let con = '';
for(var name in myaudio){//遍历对象属性名
	con += ' name ' + myaudio[name]
}
//(`${myaudio}`)
document.getElementById("demo1").innerHTML = con
}
</script>
 
</body>
</html>

3、主要是通过监测音频的事件添加一些自己的处理，添加音频事件的方法有：

参考：https://www.runoob.com/jsref/event-oncanplay.html

//1、HTML 中：
<element oncanplay="myScript">
/
<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
</head>
<body> 

<p>如何向 video 元素中添加 "oncanplay" 事件。</p>
<video controls oncanplay="myFunction()">
	<source src="mov_bbb.mp4" type="video/mp4">
	<source src="mov_bbb.ogg" type="video/ogg">
	您的浏览器不支持 HTML5 video 元素。
</video>
<script>
function myFunction() {
    alert("可以开始播放视频");
}
</script>

</body> 
</html>


//2、JavaScript 中：
object.oncanplay=function(){myScript};

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
</head>
<body> 

<p>使用 HTML DOM 向 video 元素中添加 "oncanplay" 事件。</p>
<video controls id="myVideo">
	<source src="mov_bbb.mp4" type="video/mp4">
	<source src="mov_bbb.ogg" type="video/ogg">
	您的浏览器不支持 HTML5 video 元素。
</video>
<script>
document.getElementById("myVideo").oncanplay = function() {myFunction()};
function myFunction() {
    alert("可以开始播放视频");
}
//另一种写法
//var audioL = new Audio()
//aduo.oncanplay = function(){myFunction()};
</script>

</body> 
</html>
/

//3、JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("canplay", myScript);
//
<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> 

<p>该实例演示了如何使用 addEventListener() 方法 向 video 元素中添加 "oncanplay" 事件。</p>
<video controls id="myVideo">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 元素。
</video>
<script>
document.getElementById("myVideo").addEventListener("canplay", myFunction);
function myFunction() {
    alert("可以开始播放视频");
}
</script>

</body> 
</html>