Question

我正在尝试以谷歌浏览器流式传输音频文件。该文件托管在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中不起作用。如果我将音频文件链接粘贴到选项卡中，那么也不会发生任何事情（无法播放），但是我可以保存文件。

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

我注意到的

其他一些事情是，如果我将音频文件捆绑在EAR中，则可以访问它。现在，音频文件正在其他位置动态生成，为此我在部署目录中创建了一个软链接。在这种情况下，我将无法播放。

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

谢谢

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链接。

音频标签在Google Chrome浏览器中不起作用

3 个答案: