相关HTML5中情况歌曲的全自动播发作用

日期:2020-10-10 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

歌曲的全自动播发特性,这里也详细介绍1下:

<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

autoplay 特性要求1旦声频准备就绪立刻刚开始播发。

假如设定了该特性,声频将全自动播发。

可是在具体应用中,常常会遇到不可以全自动播发的状况,关键是由于一些访问器或手机上会阻拦或不适用autoplay这个特性,在这里我详细介绍1下我选用的方式。

最先:在html中编码以下
 

<audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
<source src="music/bgmusic.mp3" />
</audio>
<!--这里是歌曲-->
<img id="btn" class="active" src="img/music.png" alt="" />
<!--这里是1个能够操纵情况歌曲播发中止的电源开关-->

在js文档中选用以下编码 
 

var audio = document.getElementById('music1');
$("#btn").bind("touchstart", function bf() {
if(audio !== null) {
//检验播发是不是已中止.audio.paused 在播发器播发时回到false.
//alert(audio.paused);
if(audio.paused) {
audio.play(); //audio.play();// 这个便是播发
$("#btn").addClass("active")
} else {
audio.pause(); // 这个便是中止
$("#btn").removeClass("active")
}
}
})

 写到了这里绝大多数安卓系统机就基础能够完成全自动播发了,可是iPhone手机上在这个情况下還是不好的

这里我选用了1个在载入页中添加1个按钮,当载入进行的情况下,点一下按钮,正确引导客户进行情况歌曲的全自动播发,编码以下:

$("html").one('touchstart',function(){
audio.play();
})

到了这里就完成了情况歌曲的全自动播发,这个方法可用于有载入页,而且必须点一下进到h5的新项目......

总结

以上所述是网编给大伙儿详细介绍的相关HTML5中情况歌曲的全自动播发作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!