Question

TL; DR底部加粗的问题

因此，我花了大部分时间试图确定是否可以将流URL链接到HTML5 Audio元素，但我无法从规范中得知。规范中的这一行（在描述audio元素时很有趣：

src — Address of the resource

因此，它看起来不一定必须是静态路径。但是，我从SO答案到规范的不同部分所读到的所有内容都是不确定的，因此我决定尝试一下。我从该网站https://lrn.fm/listen/online/处获取了不同的信息流，并决定将内容粘贴在音频src中。这是我对音频元素的代码：

<audio src='https://streams.lrn.fm:8110' controls></audio>

这是我在Mac Mojave的Chrome 71中的JS控制台中收到的错误消息（几乎在XAMPP上使用默认配置运行测试Web服务器）：

GET https://streams.lrn.fm:8110/ net::ERR_CONNECTION_CLOSED

这是我用此src（https://s2.voscast.com:7392）替换以上src时收到的错误消息：

GET https://s2.voscast.com:7392/ net::ERR_CONNECTION_RESET

因此，看起来音频元素似乎不接受流URL作为源。这是真的，还是我做错了什么？

在我看来，当通过HTTPS进行获取时，浏览器似乎不会通过非标准端口接受任何内容。那离基地远吗？差不多，这是个问题：

HTML5音频元素是否在src属性中接受远程服务器地址？

Answer 1

您刚刚做了一个简单的错误判断。

您的代码

  <audio src='https://streams.lrn.fm:8110' controls></audio>

更新代码

<audio controls>
          <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
          <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>

您只需要输入包含有效扩展名的正确网址即可。例如-.mp3，.ogg和媒体类型。

希望这会有所帮助。

代码段在这里。

  <audio controls>
              <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
              <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
            </audio>

Answer 2

快速浏览HTML issue：

尽管我认为实现可以随意拒绝连接，特别是如果它们不处理给定的媒体类型，那么规范中没有任何内容可以阻止这种情况。

Answer 3

您可以在音频元素中使用流式URls。参见：

我无法访问您提到的特定流。我怀疑它们的所有者已应用限制，因此只能从自己的页面加载它们。您可以直接在浏览器中加载这些流吗？

尝试运行自己的流服务器-或找到免费的流音频源。

将URL作为src传递时的HTML5音频元素关闭连接

3 个答案: