zoukankan      html  css  js  c++  java
  • 解决vue微信浏览器H5页面ajax请求后无法播放问题

    在说解决方案之前先说一下需求背景吧,产品要做一个答题类的测试,选择答案选项进行接口交互,如果选对播放答对的音频(推荐MP3格式,兼容性好一些),如果选错播放选错的音频。大概就是这样一个需求。

    早就听说过移动端对音频自动播放是禁止的,知道这个需求的时候就觉得不好搞,但是想着别人能做我应该也行,然后就开始了网上找填坑的方法

    找了好多都是说不全的或者是用了没效果的,最后自己通过研究之前调用微信支付的代码,最终得出了完美的解决方案,代码如下:

    if (window.WeixinJSBridge) {
    window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
    vm.$refs.audioPlayer.load()
    setTimeout(() => {
    vm.$refs.audioPlayer.play()
    }, 300)
    })
    } else {
    document.addEventListener('WeixinJSBridgeReady', () => {
    window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
    vm.$refs.audioPlayer.load()
    
    setTimeout(() => {
    
    vm.$refs.audioPlayer.play()
    
    }, 300)
    })
    }, false)
    }

    个人亲测,iphone6 iphoneX 安卓手机可以正常播放

  • 相关阅读:
    寒假补习记录_4
    寒假补习记录_3
    寒假补习记录_2
    寒假补习记录_1
    公文流转系统编程
    Javaweb编程
    转:在静态方法中访问类的实例成员
    Java字段初始化规律
    原码,反码,补码浅谈
    java第二节课课后
  • 原文地址:https://www.cnblogs.com/douyage/p/14720834.html
Copyright © 2011-2022 走看看