关于html5 audio自动播放的问题

1.autoplay控制audio的自动播放，但是在ios系统上是忽略此选项的，目前还未找到解决的办法，如果哪位大神找到了，请赐教；

2.关于audio的自定义样式问题
controls，是在页面可控制，在页面显示，如果自定义的话，就需要不显示此属性，然后根据自己的样式定义，贴代码：
<audio id="myAudio" autoplay loop="loop" val="open">
<source src="路径" type="audio/mp3"></source>
</audio>
输入你想要的格式，
//控制页面样式
<div class="music_btn">
<div class="music_open">
<img src="http://www.rabbitpre.com/img/music/pause.png" class="open_img"> <img src="http://www.rabbitpre.com/img/music/play.gif">
</div>
<div class="music_close" style="display:none;">
<img src="http://www.rabbitpre.com/img/music/play.png" class="open_img"><img src="http://www.rabbitpre.com/img/music/paused2.png">
</div>
</div>
目前有了音乐，有了样式，那么问题来了 如何把样式和音乐播放控制在一起呢？
贴代码：var myAudio = document.getElementById(‘myAudio‘)；

var myAudioWin = new Audio();

myAudioWin = myAudio;

myAudioWin.pause();//暂停

myAudioWin.play();//播放

然后根据你要显示的样式进行控制播放，选择myAudioWin.pause();或者myAudioWin.play()就好了。

如果有更好的办法请大家多多赐教

 

时间： 2024-11-05 13:38:32

关于html5 audio自动播放的问题的相关文章

[转载]html5 audio音频播放全解析——html5系列

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html 在手机上浏览效果会更好 文章结构 1

html5 audio音频播放全解析

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html(IE8以下不支持) 在手机上浏

iOS下Audio自动播放(Autoplay)音乐

*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: 15px 0; } /* HEAD

移动端audio自动播放问题

中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑: 一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网址导航等等,底部也有留白,应该出去这一部分: 二:audio背景音乐是不能自动播放的,不管怎么调试js都没用,经过多方查证,居然是移动端做了限制,一定要用户交互才能触发,网上的解决方案大多是通过touchstart事件: <audio id="myaudio" > <so

ios设置音乐audio自动播放

因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixin-1.2.0.js?ver=222"></script> 第二步,在wx.ready中进行默认播放,这个时候wx.config配置可以不用正确,但是后边的ready也可以用,所以默认播放了. //ios中音乐默认不能播放,配置在wx.ready中进行默认播放, function

html5 audio手机播放，锁屏或程序后台运行音乐不播放

今天做一个手机播放页面,发现在ios上只要锁屏或切换其他程序音乐就关闭,找了好久才发现原因. 因为页面之播放一个文件所以我这样写的 <audio id="audio" autoplay="true" controls="" preload="preload"> </audio> 再通过js设置mp3地址 audio.setAttribute("src","http://xx

Js控制HTML5 Audio 音乐播放和关闭

参考W3C详细文档:http://www.w3school.com.cn/jsref/dom_obj_audio.asp pause()方法只是暂停,这里重新load之后,再次play,音乐可重头播放 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script language="javascrip

微信audio自动播放

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> </head> <body&

iOS h5 audio自动播放设置

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #703daa; background-color: #d0efd6 } span.s1 { color: #ba2da2 } span.s2 { color: #000000 } span.s3 { color: #4f8187 } self.webView.allowsInlineMediaPlayback = YES; self.webView.mediaP