首页 > 其他分享 >h5中audio无法播放问题解决

h5中audio无法播放问题解决

时间:2023-03-17 16:15:14浏览次数:56  
标签:play audio 微信 refs h5 播放 音频

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


有问题随时交流。

 

标签:play,audio,微信,refs,h5,播放,音频
From: https://www.cnblogs.com/mihoutaoguniang/p/17227092.html

相关文章