• ios不能自动播放音频

    2017-10-07 23:50:54
    对audio,利用trigger('play')在ios上不能触发audio播放,原因ios 内置浏览器safari要播放音频,需要人为去触发,或者在微信WeixinJSBridgeReady()函数内设置自动触发。给audio设置autoplay也不生效。 html代码如下...

    对audio,利用trigger('play')在ios上不能触发audio播放,原因ios 内置浏览器safari要播放音频,需要人为去触发,或者在微信WeixinJSBridgeReady()函数内设置自动触发。给audio设置autoplay也不生效。

    html代码如下:

          <audio src="mp3/shakingAudio.mp3" preload="preload" id="shakingAudio"></audio>
    js代码如下(先引入jquery):

          $(function(){
               $('#shakingAudio').trigger('play');
          });
    结果:该方法在android下可以触发audio播放事件,但是不能触发ios下audio播放事件

    解决方法:在微信WeixinJSBridgeReady函数内触发播放事件

               1、在html中先引入jweixin.js

             <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
               2、js代码如下:     

             $(function(){
                $('#shakingAudio').play();
                document.addEventListener('WeixinJSBridgeReady',function(){
                        $('#shakingAudio').play();
                },false);
             });
    
    

    
    结论:通过以上设置就可以在android和ios下自动播放音频了。亲测可用
    

    以下方法,亲测不行

    1、在WeixinJSBridgeReady()里面设置延时在播放

      $('#shakingAudio').play();
                document.addEventListener('WeixinJSBridgeReady',function(){
                       setTimeOut( $('#shakingAudio').play();
                },5000,false);
      });

    言下之意就是只支持启动的时候播放

    2、在微信的ready()函数内添加play()函数 

    $(function(){
        autoPlay();
    
        function autoPlay(){
              wx.config({
                   //配置信息,即使不正确也能使用wx.ready()
                   debug:false,
                   appId:'',
                   timestamp:1,
                   nonceStr:'',
                   signature:'',
                   jsApiList:[]
              });
              wx.ready(function(){
                    $('#shakingAudio').play();
              });
        }
    });

    3、

    $(function(){
         $('#shakingAudio')[0].play();
    });


    
    
    展开全文
  • 微信小程序,将文字转换为语音后,使用音频进行播放。在安卓手机下可以正常播放,在IOS下不行。 【环境】 微信小程序库版本2.3.0百度语音合成服务 【解决方法】 正确代码: //创建一个音频实例 const myaudio = wx....
        

    【问题】

    微信小程序,将文字转换为语音后,使用音频进行播放。在安卓手机下可以正常播放,在IOS下不行。

    【环境】

    微信小程序库版本2.3.0
    百度语音合成服务

    【解决方法】

    正确代码:

    //创建一个音频实例
    const myaudio = wx.createInnerAudioContext();
    
    //设置obeyMuteSwitch: false(不遵循系统静音开关,即使用户打开了静音开关,也能继续发出声音)
    //设置autoplay: true(自动开始播放)
    if (wx.setInnerAudioOption) {
      wx.setInnerAudioOption({
        obeyMuteSwitch: false,
        autoplay: true
      })
    }else {
      myaudio.obeyMuteSwitch = false;
      myaudio.autoplay = true;
    }
    
    //监听各个阶段
    myaudio.onCanplay(() => {
      console.log('可以播放');
    });
    myaudio.onPlay(() => {
      console.log('监听到音频开始播放');
    });
    myaudio.onEnded(() => {
      console.log('音频自然播放结束事件');
    });
    myaudio.onStop(() => {
      console.log('音频停止事件');
    });
    myaudio.onError((res) => {
      console.log(res.errMsg);
      console.log(res.errCode);
    });
    myaudio.onWaiting((res) => {
      console.log('音频加载中事件,当音频因为数据不足,需要停下来加载时会触发')
    });
    
    
    //设置播放链接
    myaudio.src = 'https://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=abcdxxx&tok=24.b63*************************************.1543030920.282335-11522973&tex=' + encodeURIComponent(encodeURIComponent('哈哈哈哈哈哈哈哈哈')) + '&vol=5&per=0&spd=5&pit=5&aue=324.b6306a3dff68e153a0d5656b3a78bd5e.2592000.1543030920.282335-11522973';
    
    //播放
    myaudio.play();

    这样,在安卓和IOS下都可以正常播放了。

    【问题总结】

    为什么总是播放不了?注意下面两点:

    1、这个播放链接返回的必须是格式正确的音频文件

    所以如果换一个链接就能播放了,那可能就说明你原来的链接返回了错误的音频格式。

    原本我的播放链接是:

    myaudio.src = 'https://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=' + encodeURIComponent('哈哈哈哈哈哈哈哈哈');

    这个tts.baidu.com和tsn.baidu.com长得非常像,为什么一开始用的不是tsn?是因为在网上搜索到的好多案例都是用的tts,而且tsn需要token参数,这个参数要么需要从百度AI开放平台手动获取,要么需要调用获取token的接口,而这个接口又不支持浏览器跨域,因此需要从服务端获取token或者每隔30天手动输入更新,我嫌麻烦,所以一开始先用了tts。

    tts在安卓下确实可以正常播放,可以看到Console中依次打印出了:

    监听到音频开始播放
    音频加载中事件,当音频因为数据不足,需要停下来加载时会触发
    可以播放
    音频自然播放结束事件

    但是在IOS下就无法播放了,Console中依次打印出了:

    音频加载中事件,当音频因为数据不足,需要停下来加载时会触发
    INNERERRCODE:-11850, ERRMSG:操作停止
    10002

    根据官方的说法,应该是因为返回的音频格式IOS不支持。(https://developers.weixin.qq....)如果返回的音频格式正确,是可以正常播放的。

    ps:后来查了一下发现tts这个接口应该只是他们内部demo地址,所以还是使用正式的tsn吧。

    2、需要对tsn接口的文本字符串参数进行编码
    比如: encodeURIComponent(encodeURIComponent('哈哈哈哈哈哈哈哈哈'));

    没有做编码,直接上文本的,也会出现安卓行IOS不行的情况。

    展开全文
  • 关于音频在微信环境下自动播放 //main.js Vue.prototype.buttonAudio = new Audio; //vue原型上创建audio对象 let buttonAudio = Vue.prototype.buttonAudio; // buttonAudio.setAttribute('preload', 'auto'); // ...

    关于音频在微信环境下自动播放

    //main.js
    Vue.prototype.buttonAudio = new Audio; //vue原型上创建audio对象
    let buttonAudio = Vue.prototype.buttonAudio;
    // buttonAudio.setAttribute('preload', 'auto');
    // buttonAudio.setAttribute('controls', 'controls');
    Vue.prototype.audioPlay = (srcAudio) => {
      buttonAudio.setAttribute('src', srcAudio);
      buttonAudio.load(); //加载音频
      if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') {
        WeixinJSBridge.invoke('getNetworkType', {}, function () {
          buttonAudio.pause();
          buttonAudio.play();
          console.log('ios--play')
          buttonAudio.addEventListener('canplay', () => {
            console.log("canplay----")
            buttonAudio.play();
          })
        })
      }
      buttonAudio.setAttribute('loop', 'loop');
      //重复播放
    
      buttonAudio.addEventListener('canplay', () => {
        console.log('Android--play')
        buttonAudio.play();
      })
      //buttonAudio.play();
      // console.log('安卓play')
      //开始播放
    }
    
    展开全文
  • 我要实现的功能是语音导航, 需要将导航的信息通过文字转换成语音, 然后播放出来. 现在就差播放出来这一步. 由于使用的是web-view, 所以无法使用微信原生提供的wx.createInnerAudioContext方法(jweixin-1.3.2.js 中...

    重点: 这个解决方法仍然最少还是需要点击一次才可以, 完全不点击就自动播放的方法暂时还是没有找到

    1. 背景

    我要实现的功能是语音导航, 需要将导航的信息通过文字转换成语音, 然后播放出来. 现在就差播放出来这一步.

    由于使用的是web-view, 所以无法使用微信原生提供的wx.createInnerAudioContext方法(jweixin-1.3.2.js 中没有 wx.createInnerAudioContext方法), 也看了下web-view中支持的其他音频播放JSSDK, 都跟需求不符合.

    所以就想到使用html5中的audio标签。

     

    2. 问题描述

    在使用audio标签后发现,ios系统中,无法播放语音,找了很久只是在网上找到的说法是:ios中的audio没有自动播放功能,必须要有用户交互才可以播放。(从安全角度,以及流量角度看,这也是可以理解的)

    但是,对于我目前要实现的功能,没办法不停的让用户去点击操作。

     

    3. 解决思路

    在网上找了各种解决方法,都是播放一次就行了, 但是基本也是要监听了点击事件的。所以就考虑看,能不能:不允许自动播放嘛...我就试试点击"开始导航"按钮的时候, 播放一段空的语音, 然后再需要导航的地方, 用代码去控制播放要的语音...

    结果一试,还真可以。(就怕以后IOS更新后,把这个地方给堵住了,目前我IOS版本是11.4.1,感觉是个漏洞)

     

    4. 测试代码实现

    a. 小程序加入web-view, 并将src地址指测试页面:

    <web-view src="{{url}}"></web-view>

    b. 测试页面代码:

    <script src="plugins/jquery/jquery.min.js"></script>
    <script>
    
    function playURL(url){
    	alert('play: ' + url);
    	$("#audiome").attr("src", url);
    	var audio = $("#audiome")[0];
    	audio.pause();
    	audio.play();
    }
    
    function btnPlay(){
    	/* 
    		注意这一行playURL('')
    		如果点击按钮的时候, 不调用一下, 则ios中, 后续setInterval方法中的调用是无法播放出声音的
    	*/
    	playURL('')
    	setInterval("playURL('https://xxx.xxx.xxx/speech/xxxxx.mp3')", 5000);
    }
    
    </script>
    
    <body>
    <input id="btnTest" type="button" onclick="btnPlay()" value="Play">
    <audio id="audiome"></audio>
    </body>
    

    c. 代码解释:

    当点击Play按钮时, 调用了playURL(''), 播放一下无效的URL, 只是为了audio控件是由点击事件进行播放的. 随后的setInterval方法, 只是为了模拟多次异步的从服务器上获取语音文件进行播放.

    d. 尝试结果

    竟然这样是可以的...不算完美吧, 总算是绕过了无法自动播放的问题, 按照这个逻辑推断, 具体实现的时候, 页面中任何一个必须要点击的地方, 都可以作为触发点.

    展开全文
  • 小程序背景音乐 wx.getBackgroundAudioManager()在ios上不能播放可能没有加title属性或者值为空 如何让小程序背景音乐循环播放 小程序背景音乐 wx.getBackgroundAudioManager()在ios上不能播放可能没有加...

    小程序背景音乐 wx.getBackgroundAudioManager() 在 ios 上不能播放

    可能没有加 title 属性或者值为空

    如何让小程序背景音乐循环播放

    onLoad: function() {
        const backgroundAudioManager = wx.getBackgroundAudioManager()
        player()
        function player() {
            backgroundAudioManager.title = '此时此刻'
            backgroundAudioManager.src = '播放url'
            backgroundAudioManager.onEnded(()=>{
                player()
            })
        }
    }
    
    展开全文
  • 不允许audio和video自动播放,所以想要获取页面上的audio标签然后给src值,然后使用自动播放那是实现不了的,即使给play()也是播放过不了; 解决方法是直接创建一个audio对象,当时问题是iOS也是不允许主动创建对象...
  • 我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的。直到微信火爆起来,发现iOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了之前的认知。但是...
  • 音频会话 音效播放 音乐播放 音频录制 音频管理 音频队列服务 参考地址
  • 微信小程序开发交流qq群 581478349 微信: 承接小程序开发 &lt;view class=''&gt; &lt;!-- 背景图片 --&gt; &lt;image class='bg' src='http://img4.imgtn.bdimg.com/it/u=1866686759...
  • (1)使用微信小程序的 wx.playBackgroundAudio(Object object) 等不再维护的接口向 wx.getBackgroundAudioManager 中转移,来管理微信小程序的后台播放器播放音乐。 (2)在微信开发者工具中可以播放背景音乐,...
  • 微信小程序背景音频管理器(暂停、播放…) .js onLoad: function (options) { wx.playBackgroundAudio({ dataUrl: '音乐链接,目前支持的格式有 m4a, aac, mp3, wav', title: '音乐标题', coverImgUrl: '封面URL...
  • 音频播放使用的组件是: wx.getBackgroundAudioManager(); 在wx.request()中首先初始音频路径信息 wx.request({ success:(res)=> { that.setData({ Title: audioinfo.bookName,//标题 p_...
  • <template> <audio src="./static/music.mp3" id="bgMusic" preload="auto" loop></audio> <div class="bgMusicBtn" @click="bgMusicPlayOrPause('bgMusic')">...img ...
  • iOS 远程推送和本地推送时播放自定义音频 先上结论: 在各平台及极光推送技术论坛看了大量技术贴后,总结了实现接到推送时播放音频的几种方法: 使用voip,即pushKit,是苹果专为视频通话开放的高优先级推送,...
  • 微信小程序的web-view可以嵌套h5页面,h5内容可以在小程序上展示。 <web-view src="{{url}}?...碰到的问题是:当进入到H5页面时,会播放音乐,当返回到小程序或者退出小程序后,在微信聊天界面音频还在继...
  • 是最底层也是最简单的声音播放服务,调用 AudioServicesPlaySystemSound 这个方法就可以播放一些简单的音频文件,使用此方法只适合播放一些很的提示或者警告音,因为它有很多限制: ■ 声音长度要小于 30 秒 ■...
  • 小程序原生组件的音频播放时并没有进度条的显示,而此次项目中,鉴于原生的视频进度条样式太丑,产品要求做一个可拖拽的进度条满足需求。视频和音频提供的api大致是相似的,可以根据以下代码修改为与音频相关的...
  • 废话不多说,直接上代码。 // 微信、支付宝音频Hack方案 ; void function (win, doc, undefined) { ... // 进而导致浏览器以为是用户触发播放而允许播放 Audio.prototype._play = Audio.prototype.play; HTMLAudioEl
  • 小程序上,android设备可以正常播放在线网络视频 , 但是ios设备无法正常播放. 原来是因为ios设备加载视频的时候和android不一样导致的, ios会分段去请求相应的字节区间 , 而android支持一下全部请求 所以后台这块...
  • controls="controls" preload id="music1" autoplay="autoplay" hidden> js是这样的 function bf(){ var audio = document.getElementById('music1'); if(audio!==n
1 2 3 4 5 ... 20
收藏数 9,995
精华内容 3,998