h5中audio无法播放问题解决

H5页面中添加audio标签，通过调用play()方法进行播放音频，电脑可以正常听到音效，微信中打开没有声音。

<audio id="audio" ref="audio" class="sound">
    <source src="@/static/pagesound.mp3" />
</audio>

　　播放方法：

this.$refs.audio.play();

　　调用了播放方法，手机上没有看到音频在播放，设置了muted静音之后，可以看到音频进度条在走了，但是我们需要声音呀。后续尝试更改muted为false也不管用。

　　网上搜了搜相关问题，发现了微信的api可以解决音频在微信中不播放的问题，具体如下：

1、引入微信的api，在微信公众号下载就可以（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3）

import wx from './jweixin-1.6.0.js';

2、检测是否在微信环境

const UA = window.navigator.userAgent;
const wechat = UA.includes('MicroMessenger') && !UA.includes('miniProgram')

3、调用方法：

    if (wechat) {
        const audio = document.getElementById('audio');
        if (window.WeixinJSBridge) {
          window.WeixinJSBridge.invoke(
            'getNetworkType',
            {},
            function (e) {
              audio.play();
            },
            false
          );
        } else {
          document.addEventListener(
            'WeixinJSBridgeReady',
            function () {
              window.WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                audio.play();
              });
            },
            false
          );
        }
      } else {
        this.$refs.audio.play();
      }
                    

　　

如果不是打开页面就播放的话，可以用这种方法（微信中亲测有效）：

<div @touchstart="onstart">
    // 代码部分
    //音频
    <audio id="audio" ref="audio" class="sound">
        <source src="@/static/pagesound.mp3" />
    </audio>
</div>

　　1、触摸页面的时候触发播放

onstart() {
    this.$refs.audio.play();
    this.$refs.audio.pause();
}

　　2、播放的时候调用（也可以设置下currentTime = 0）

this.$refs.audio.play();

 

参考了文章，非常感谢！

https://www.cnblogs.com/jlliu/p/11233373.html

有问题随时交流。