Аудио не воспроизводится (ошибка браузера как для Chrome, так и для Firefox?)

#google-chrome #firefox #dom #audio #html5-audio

#google-chrome #firefox #dom #Аудио #html5-аудио

Вопрос:

Аудио не воспроизводится как в 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>
  

Ответ №1:

После установки атрибута для source элемента скажите аудиоэлементу, чтобы он загрузил источник. Это должно сработать:

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