音频标签在 google chrome 中不起作用

Question

我正在尝试在 google chrome 中流式传输音频文件。该文件托管在 wildfly 服务器上。下面是示例代码

<html>
<head>
    <title>Audio Demo</title>
    <script type="text/javascript">
        function updateSource(){
            var audio = document.getElementById('wavSource');
            audio.src = 'https://SERVER_URL:8443/FILE_PATH/FILE_NAME.wav';
            var a = document.getElementById('audio');
            a.load();
        }
    </script>
</head>
<body>
    <audio id="audio" controls="controls">
        <source id="wavSource" src="" type="audio/wav"></source>
        Your browser does not support the audio format.
    </audio>
    <button onclick="updateSource();">Item1</button>
</body>

单击该按钮时，audio.src 被设置为指定的文件。此示例代码在 firefox 中运行良好，但在 google chrome 中不起作用。如果我将音频文件 link 粘贴到选项卡中，则也没有任何反应（无法播放），但我可以保存该文件。

在服务器端，在指向音频文件位置的 deployment 目录中创建了一个 softlink。

我注意到的其他一些事情 是，如果我将音频文件捆绑在 EAR 中，那么我就可以访问它。现在音频文件是在不同位置动态生成的，为此我在部署目录中创建了一个 softlink。在这种情况下我无法播放它。

有人可以告诉我我做错了什么吗？

谢谢

Answer 1

你的代码看起来不错。我用不同的音频文件尝试过它并且它有效。我认为问题一定出在您的音频文件或路径上。

Answer 2

我用 .wav 音频源检查了您的示例代码，如下所示。 检查您服务器上您要播放的实际文件，是否可访问、可播放以及是否为实际的 .wav 文件。

如果这在您的 Google Chrome、clear its cache completely 中不起作用，请更新它，重新启动计算机并再次检查。到时候应该可以了。

尽管如此，请将您的脚本放在 body 标签的底部：

<html>
<head>
    <title>Audio Demo</title>    
</head>
<body>
    <audio id="audio" controls="controls">
        <source id="wavSource" src="" type="audio/wav"></source>
        Your browser does not support the audio format.
    </audio>
    <button onclick="updateSource();">Update Source</button>
    <script type="text/javascript">
        function updateSource(){
            var audio = document.getElementById('wavSource');
            audio.src = 'http://www.wavsource.com/snds_2018-06-03_5106726768923853/people/men/about_time.wav';
            
            var a = document.getElementById('audio');
            a.load();
        }
    </script>
</body>
</html>

来源：WavSource.com

Answer 3

我终于解决了这个问题。它与 Wildfly 10.0.0 有关。参见 this link。

音频标签在 google chrome 中不起作用

audio tag not working in google chrome

javascript

google-chrome

html5-audio

wildfly-10