1. ホーム
  2. Web制作
  3. html5

モバイルやWeChatでHTML5の音声が自動再生されない問題を解決。

2022-01-14 21:33:38

H5ページを再度行ったところ、モバイル側とWeChat側で自動再生を追加しても音声が自動再生されないことがわかりました。

通常の解決策は、インタラクティブなイベントを与えることです。

タグを使用します。

<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">

audio属性はこのブラウザではサポートされていません<

回避策

//-- Create a page listener, wait for the WeChat page to finish loading and trigger audio playback
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});
//-- Create a touch listener to trigger an event to play audio when the browser opens the page by touching the screen
document.addEventListener('touchstart', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
    }
    audioAutoPlay();
});

AppleのモバイルWeChat側での回避策もあります

ステップ1:jsファイルの導入

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

ステップ2:設定ファイル

<script>
        function autoPlayVideo(){
            wx.config({
                debug:false,
                appId:"",
                timestamp:1,
                nonceStr:"",
                signature:"",
                jsApiList:[]
            });
            wx.ready(function(){
                var autoplayVideo=document.getElementById("audio");
                autoplayVideo.play()
            })
        };
        autoPlayVideo();
</script>

安定したネットワークがあれば自動再生可能です。

概要

上記は、携帯電話やWeChat側のHTML5オーディオの問題を自動的に再生することはできません解決するためにあなたを紹介するために、私はそれがあなたを助けることを願って、何か質問がある場合は、私にメッセージを与えてください、私は速やかに皆に返信されます。これからもスクリプトハウスのウェブサイトをよろしくお願いします。
この記事がお役に立つと思われる方は、出典を明記の上、ご自由に転載してください!ありがとうございました。