嵌入 HTML 音频元素答案

【问题标题】：Embedding an HTML Audio Element嵌入 HTML 音频元素
【发布时间】：2013-08-30 14:56:24
【问题描述】：

我想在 HTML 页面中嵌入音频文件。下面是我正在使用的代码。

<audio controls height='100' width='100'>
    <source src='C:/wamp/www/Music/Tracks/Sweater&nbsp;Weather.MP3' type='audio/mpeg'>
    <embed height='50' width='100' src='C:/wamp/www/Music/Tracks/Sweater&nbsp;Weather.MP3'>
</audio>

当我运行 HTML 页面时，出现了音频元素，但它是空白的，并且无法播放音乐。我做错了什么？

【问题讨论】：

您是在线托管网页还是本地存储在您的计算机上？

标签： javascript html audio mp3 wamp

【解决方案1】：

您正在使用计算机的绝对路径。您必须上传音乐文件并在嵌入中放置一个相关链接。此外，请尝试在文件中使用下划线而不是空格。例如，如果您将其上传到您正在执行这段代码的同一文件夹中，它将是这样的；

<audio controls height='100' width='100'>
    <source src='Sweater_Weather.MP3' type='audio/mpeg'>
    <embed height='50' width='100' src='Sweater_Weather.MP3'>
</audio>

【讨论】：

我将 MP3 文件重命名为 Sweater_Weather.MP3 并使用了上面的代码，但同样的问题仍然存在。您如何上传音乐文件并在嵌入中放置相关链接？
服务器在我的机器本地，我还需要上传文件吗？
您是在本地运行 HTML 吗？如果是这样，您可以只使用自己的代码，稍作改动；

【解决方案2】：

&nbsp;

在 HTML 中将为用户打印文本中的空格字符。

如果你正在解析一个 URL，你会需要 %20 的 URL 编码，例如：

<audio controls height='100' width='100'>
  <source src='C:/wamp/www/Music/Tracks/Sweater%20Weather.MP3' type='audio/mpeg'>
  <embed height='50' width='100' src='C:/wamp/www/Music/Tracks/Sweater%20Weather.MP3'>
</audio>

【讨论】：

我试过上面的代码，但是，同样的问题存在。我感觉它与“/”有关，或者与文件位置有关（尽管上面指定的文件路径是正确的）。

【解决方案3】：

<!DOCTYPE html>
</html>
<head></head>
<body>
<audio controls height='100' width='100'>
    <source src='C:/.../..../..../sample_music.mp3' type='audio/mpeg'>
</audio>
</body>
</html>

请检查您的文件名，而不是空格，使用下划线连接歌曲名称本身的后跟扩展名，上面的代码在我的末尾完美运行

【讨论】：

【解决方案4】：

您不需要上传文件。它与你的路径有关。确保您指向的路径相对于托管本地站点的位置（通过 wamp）。

例如，如果您的网站位于 C:\wamp\www\ 您的来源将是 src='Music/Tracks/Sweater Weather.MP3'

文件名中允许有空格。

编辑：

<audio controls>
   <source src='Tracks/Sweater Weather.MP3' type='audio/mpeg'>
</audio>

【讨论】：

您的网站在本地的什么位置？
它在音乐文件夹中
查看我上面的帖子编辑。如果您的网站在音乐文件夹中，您应该使用上述...