html代码区域
<audio controls autoplay loop class="audioattr"> <source src="text2.mp3"> <source src="text.mp3"> </audio> <button class="btn">测试属性按钮</button> <button class="btnon">测试事件按钮</button>
script代码片段
var Oaudio=document.querySelector('.audioattr'); //console.dir(Oaudio);本人习惯性的打印出来这标签支持的所有属性和事件; var btn=document.querySelector(".btn"); var btnon=document.querySelector(".btnon"); btn.onclick=function(){ Oaudio.currentTime=60;//会直接跳到60s的位置; console.log(Oaudio.currentTime)//打印出当前播放的时间; console.log(Oaudio.volume)//打印出当前的音量; Oaudio.volume=0.8;//音量的范围是在0-1之间进行调节的; console.log(Oaudio.muted);//设置是否静音的属性; Oaudio.muted=true//当前为静音状态; console.log(Oaudio.loop)//true console.log(Oaudio.currentSrc)//这个属性还是挺有用的; } // 事件的测试; btnon.onclick=function(){ // Oaudio.pause();使正在播放的按钮暂停; //Oaudio.play();使正在暂停的播放; }
具体的属性解释;同志们可以把上面的代码copy下来;自己测试;
1:首先说下source这个新标签;
- 它是video和audio的媒介标签;定义媒体资源;
- 你可以好几个source;目的是;就是你可以同时定义还几种不同格式的资源;电脑会根据它本身能够支持的类型进行支持;
- 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
2:接下来是audio的属性:
*controls 显示或者隐藏用户的控制界面;如果没有这个属性的话;你就找不到控制界面了;
*autoplay属性如果具有着属性的话;在页面加载完成之后;音频就会自己播放;
*loop属性:如果具有这个属性的话;当音频播放完毕以后;就会开始循环;没办法跟属性的;
*currentTime:是个可读可写的属性;打印出播放时间;是可以自己控制的;
*volume:是audio的音量属性;同样是可以设置的;
这些都是脚本可以控制的属性
下面的是脚本没办法控制的;
duration:获取媒体文件的播放时间,以秒为单位;如果无法获取,为NAN;
ended: 如果媒体播放完毕,就返回true;
startTime 返回起始播放时间;
currentSrc: 以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件
3:audio支持的一些事件;
- 首先是load():加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载;
- play():加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
- pause():暂停处于播放状态的音频、视频文件
希望对大家有所帮助!
