时间戳

首页 > 解决方案 > 将 URL 作为 src 传递时 HTML5 音频元素关闭连接

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

问题描述

TL;DR 底部的粗体问题

所以我花了一天的大部分时间试图弄清楚我是否可以将流式 URL 链接到 HTML5 音频元素，但我无法从规范中分辨出来。规范中的这一行（在描述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 上使用默认配置运行测试网络服务器）：

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

src这是我用此 src ( https://s2.voscast.com:7392 )替换上述内容时收到的错误消息：

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

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

对我来说，当通过 HTTPS 获取时，浏览器似乎不会接受非标准端口上的任何内容。这么离谱吗？差不多，这是个问题：

HTML5 Audio 元素是否接受src属性中的远程服务器地址？

标签： htmlaudiohttpshtml5-audio

解决方案

你刚刚犯了一个简单的错误。

你的代码

  <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>

您只需要输入包含有效扩展名的正确 url。像 - .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>

推荐阅读