Aduio标签

定义:

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

 

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论

打赏作者

夜雨听萧瑟

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值