1***@qq.com
1***@qq.com
  • 发布:2019-07-13 09:01
  • 更新:2020-03-31 16:23
  • 阅读:5785

H5 IOS音乐无法自动播放

分类:uni-app

IOS H5音乐无法自动播放

(前端小白有什么说得不对的,别怼太凶2333333)

(一)对W3C的了解

小编也是一个开发不久的前端小白,在对音乐和视频这些多媒体应用中也踩了一些坑
在我的思路中音乐播放不就是一个<audio></audio>久解决了吗?
附上W3C的多媒体事件

有了这些根本不把这个事情放在心里。
但当我看到uniapp官网文档audio时就傻眼了

(surprised)没了很多方法的执行,最主要的是没有DOM。
但用了uniapp就要尊重框架的规定
让我还能绝处逢生的是 uni.createInnerAudioContext
https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext

(二)uni.createInnerAudioContext

无论是对象还是方法上来说这都是更优于uniapp官网audio标签的选择
在官网的uni.createInnerAudioContext示例中能够找到自动播放的语句
属性列表中也明确说明用法既用途
autoplay Boolean 是否自动开始播放,默认 false 否
在写了一下代码的之后讲道理是src读取到一个真实可用的路径是能够自动播放的
小编代码如下
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay=true;
innerAudioContext.onCanplay(()=>{
let timeLoad = Math.floor(innerAudioContext.duration); // 这里是获取总播放时间
this.musicTotalTime = timeLoad; // 这里是赋值
this.$api.msg('加载完成自动播放了');
});
innerAudioContext.src = data.Url; // data.Url就是音乐的路径
代码的执行有着这样的先后顺序
但是安卓与IOS在执行这件事上完全不是一回事儿。
下面图是安卓能够正常自动播放的情况

下面图是IOS不能正常自动播放的图片

(三)环境

代码是能运行在手机浏览器上,主要浏览人群是微信APP人群(所有图片信息和错误问题都以微信APP内置浏览器为准、、别的浏览器小编没有测试)

2019-07-13 09:01 负责人:无 分享
已邀请:

最佳回复

1***@qq.com

1***@qq.com (作者)

已解决在IOS 的微信浏览器中音乐自动播放。

var jweixin = require('jweixin-module');  
jweixin.ready(function(){  
        WeixinJSBridge.invoke('getNetworkType', {}, function(e){  
            innerAudioContext.play();  
        })  
    });

这里和网上不一样的是ready方法。
在我的代码中

document.addEventListener("WeixinJSBridgeReady", function () {  
            console.log('Allne');  
        }, false);

是没有执行的,改成ready方法,里面的WeixinJSBridge对象也已经有了。
IOS自带浏览器还待解决

龙雨溪

龙雨溪

首先H5端,是可以访问Dom的,只是同名的标签在编译时会编译成uni-app的,但你用js访问一点问题没有,比如

var audio = new Audio  
// 或者  
var audio = document.createElement('audio')

另外 autoplay 微信内不能生效可以参考:https://www.baidu.com/s?wd=%E5%BE%AE%E4%BF%A1%E6%B5%8F%E8%A7%88%E5%99%A8%E9%9F%B3%E9%A2%91%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE&tn=84053098_3_dg&ie=utf-8

1***@qq.com

1***@qq.com

H5 IOS音乐无法自动播放
http://www.chuhei4558.top
http://www.chuhei3582.top
http://www.chuhei5918.top
http://www.chuhei3935.top
http://www.chuhei5112.top
http://www.chuhei6689.top
http://www.chuhei0563.top
http://www.chuhei8607.top
http://www.chuhei7707.top
http://www.chuhei6693.top

跨越山海遇见你

跨越山海遇见你 - e

ios方面:亲,为啥直接播就可以播,放在请求里就不播了,用settimeout测试也是一延迟就播不了了,怎么解决呢,哭哭

2***@qq.com

2***@qq.com

以下方式 亲测可以:
let jweixin = require('jweixin-module');
jweixin.ready(function(){
innerAudioContext.play();
});

  • 风格法

    请问一下 "jweixin-module" 是啥

    2020-11-30 10:18

该问题目前已经被锁定, 无法添加新回复