audio ios 加载问题
2019-04-18 10:58:00 weixin_34357436 阅读数 12

使用H5的audio标签的时候,有时需要自动播放背景音乐,但是Android和IOS为了限制流量,所以不支持autoplay的属性,需要发生用户交互事件才能执行,有各种按钮,监听触摸等等的事件方法绕过此限制,但是给用户的体验不好 ,背景乐还要老是让用户触发事件。第二种原因可能是权限的问题,我使用其他app的时候总是手机自动提醒我是不是要给予声音,访问,照相等等的权限,这个提醒可能是系统或者是类似防火墙软件的提示,但是在Html网页中没有提示。

经过自己测试:
1、HTML创建Audio(autopaly controls):PC----OK
MOBILE----:OK
2、HTML创建Audio(autopaly):PC----OK
-------->总结:moible不支持autoplay
MOBILE----:NO
3、HTML创建Audio(autopaly controls ),Script设置Souce的SRC : :PC----OK
-------->总结:支持动态设置路径(Audio和Source 都可以)
MOBILE----:OK
4、HTML创建Audio(autopaly ),Script设置Souce的SRC : :PC----OK
-------->总结:moible不支持autoplay
MOBILE----:no
5、alert(audio.autoplay):
PC----: 设置时为true;;不设置时为false;
设置autoplay不设置对mobile没影响 参数的boolean值没矛盾就是被屏蔽了
MOBILE----:设置时为true;;不设置时为false;
6、动态创建audio(document.createElement('audio')):PC----OK;
总结:默认audio.autoplay为false 不能自动播放,play()方法也拯救不了MOBILE;
MOBILE----:NO
7、 总结: var audio=document.createElement('audio');
audio.src='aaa.mp3';
window.addEventListener('touchstart', function(){
audio.play();
}, false);
问题解决了;

转载于:https://www.jianshu.com/p/0aeef6047bd6

2016-04-25 16:40:57 qq_30529627 阅读数 213

  // iOS 7/8 仅需要 play 一下

audioEl.play();

  // iOS 9 需要先load()然后再play()

audioEl.load()

audioEl.play();


2017-07-27 08:27:00 weixin_34220834 阅读数 15

最近做项目,碰到一个问题:就是音频播放,同样的设置,在安卓上面无比顺畅,但是在ios上面却始终没有任何效果,作为H5开发,我痛恨世界上的所有兼容,迫切出现一个大佬一桶天下,不过眼下拿人工资,总要先解决bug,话不多说,解决如下

原因:ios不支持audio自动播放

解决:

1、普通页面添加事件可以是onload,或者click,使其可以自动播放

`document.getElementById('audio').play()`

2、微信页面,我看到有大神铺贴,就直接摘抄下来,有帮助到地方就谢谢前仆后继的先驱者把

`//一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以

document.getElementById('audio').play();

//微信必须加入Weixin JSAPI的WeixinJSBridgeReady才能生效

document.addEventListener("WeixinJSBridgeReady", function () {

document.getElementById('audio').play();

// document.getElementById('video').play(); //视频自动播放

}, false);`

2019-04-18 10:58:00 weixin_33877885 阅读数 7

使用H5的audio标签的时候,有时需要自动播放背景音乐,但是Android和IOS为了限制流量,所以不支持autoplay的属性,需要发生用户交互事件才能执行,有各种按钮,监听触摸等等的事件方法绕过此限制,但是给用户的体验不好 ,背景乐还要老是让用户触发事件。第二种原因可能是权限的问题,我使用其他app的时候总是手机自动提醒我是不是要给予声音,访问,照相等等的权限,这个提醒可能是系统或者是类似防火墙软件的提示,但是在Html网页中没有提示。

经过自己测试:
1、HTML创建Audio(autopaly controls):PC----OK
MOBILE----:OK
2、HTML创建Audio(autopaly):PC----OK
-------->总结:moible不支持autoplay
MOBILE----:NO
3、HTML创建Audio(autopaly controls ),Script设置Souce的SRC : :PC----OK
-------->总结:支持动态设置路径(Audio和Source 都可以)
MOBILE----:OK
4、HTML创建Audio(autopaly ),Script设置Souce的SRC : :PC----OK
-------->总结:moible不支持autoplay
MOBILE----:no
5、alert(audio.autoplay):
PC----: 设置时为true;;不设置时为false;
设置autoplay不设置对mobile没影响 参数的boolean值没矛盾就是被屏蔽了
MOBILE----:设置时为true;;不设置时为false;
6、动态创建audio(document.createElement('audio')):PC----OK;
总结:默认audio.autoplay为false 不能自动播放,play()方法也拯救不了MOBILE;
MOBILE----:NO
7、 总结: var audio=document.createElement('audio');
audio.src='aaa.mp3';
window.addEventListener('touchstart', function(){
audio.play();
}, false);
问题解决了;

转载于:https://www.jianshu.com/p/0aeef6047bd6

2018-06-28 14:19:00 weixin_33717298 阅读数 38

解决audio标签样式问题及ios自动播放问题

html代码如下,ios的audio标签好像不支持ogg文件播放,在微信端放了ogg音频文件,都无法播放,因此改用MP3文件。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">
<audio controls="controls" autoplay="autoplay" id="mp3Btn" style="display: none;">
<source src="resource/mp3.mp3" type="audio/mp3" />
</audio>
</pre>

设置为display:none,隐藏掉音频组件,增加额外组件样式,用于控制音频的播放。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><div style="width: 50px;height: 50px; position: absolute; top: 20px;right: 10px;" class="btn-audio rotateClass">
<img src="image/audio.png" style=" width: 50px;">
</div></pre>

引入了一张音符图片,增加css3样式,使图片旋转起来,增加动态效果,其中rotateclass主要控制图片的旋转。代码如下

[
2224826-1b57158b00b59aa4.gif
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.rotateClass{ -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
/* 设置动画,animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; / -webkit-animation:play 3s linear infinite; -moz-animation:play 3s linear infinite; animation:play 3s linear infinite;
} @-webkit-keyframes play{ 0% { /
水平翻转 /
/
-webkit-transform:rotateY(0deg);/
/
垂直翻转
-webkit-transform:rotateX(0deg);
顺时针旋转
-webkit-transform:rotate(0deg);
逆时针旋转
-webkit-transform:rotate(0deg); / -webkit-transform:rotateX(0deg);
} 100% { -webkit-transform:rotate(360deg);
/
水平翻转 /
/
-webkit-transform:rotateY(360deg);/
/
垂直翻转
-webkit-transform:rotateX(360deg);
顺时针旋转
-webkit-transform:rotate(360deg);
逆时针旋转
-webkit-transform:rotate(-360deg); /
} }
@-moz-keyframes play{ 0% {
-moz-transform:rotate(0deg);
/
-moz-transform:rotateY(0deg);/
/
-moz-transform:rotateX(0deg);
-moz-transform:rotate(0deg);
-moz-transform:rotate(0deg); /
} 100% { -moz-transform:rotate(360deg);
/
-moz-transform:rotateY(360deg);/
/
-moz-transform:rotateX(360deg);
-moz-transform:rotate(360deg);
-moz-transform:rotate(-360deg); /
} }
@keyframes play{ 0% {
transform:rotate(0deg);
/
transform:rotateY(0deg);/
/
transform:rotateX(0deg);
transform:rotate(0deg);
transform:rotate(0deg); /
} 100% { transform:rotate(360deg);
/
transform:rotateY(360deg);/
/
transform:rotateX(360deg);
transform:rotate(360deg);
transform:rotate(-360deg); */
}</pre>

[
2224826-c9e237dadc466b28.gif
复制代码

](javascript:void(0); "复制代码")

用JS控制,当歌曲播放时,图片自动旋转,歌曲停止后,图片旋转停止。JS代码如下:

[
2224826-31ed9893f570ca12.gif
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><script type="text/javascript"> $(document).ready(function(){ //播放完毕
$('#mp3Btn').on('ended', function() {
console.log("音频已播放完成");
$('.btn-audio').removeClass('rotateClass');
}); //播放器控制
var audio = document.getElementById('mp3Btn');
audio.volume = .3;
$('.btn-audio').click(function() {

        event.stopPropagation();//防止冒泡
        if(audio.paused){ //如果当前是暂停状态
            $('.btn-audio').addClass('rotateClass');
            audio.play(); //播放
            return;
        }else{//当前是播放状态
            $('.btn-audio').removeClass('rotateClass');
            audio.pause(); //暂停''

}
});
}); </script></pre>

[
2224826-ab3b676998ebb29e.gif
复制代码

](javascript:void(0); "复制代码")

至此,代码在安卓机和PC端上运行正常,但在IOS系统上会出现无法播放的情况。查阅了相关资料,需引入微信API接口,用JS控制代码如下:

[
2224826-c23cc2920aa13930.gif
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript"> document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('mp3Btn').play(); // document.getElementById('video').play();
}, false); </script></pre>

[
2224826-e67bc86a55dd153a.gif
复制代码

](javascript:void(0); "复制代码")

至此阶段,经测试,代码运行正常。

没有更多推荐了,返回首页