音频无法播放Chrome和Firefox都存在浏览器错误？

编程问答 2022-08-13

问题描述

Chrome和Firefox均无法播放音频。为什么？！

https://jsfiddle.net/8udfegbq/ 

<html>
    <head><Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <audio id="my-audio" class="video-js" controls="controls" preload="auto" data-setup="{}">
            <source/>
            <p>
            To hear this audio please enable JavaScript,and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 audio</a>
            </p>
        </audio>
        <script>
            function displayVideo(id,link) {
                link = "https://arweave.net/eAESnl8QnIw9gG4Wj1RvK3dlLepMlIsDEGiYNqTp_zw";
                $.ajax(link,{method: 'HEAD'})
                    .then(function(data,textStatus,xhr) {
                        console.log("Loaded.")
                        const type = "audio/wav";
                        const source = $(`#${id}audio source`);
                        source.attr('src',link);
                        source.attr('type',type);
                    })
            }
            displayVideo('my-',"https://arweave.net/eAESnl8QnIw9gG4Wj1RvK3dlLepMlIsDEGiYNqTp_zw");
        </script>
    </body>
</html>

解决方法

在source元素上设置属性后，告诉音频元素加载源。这应该可以解决问题：

$("#my-audio")[0].load();
audiodomfirefoxgoogle-chromehtml5-audio