【问题标题】: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>
    

    【讨论】:

    • 您的网站在本地的什么位置?
    • 它在音乐文件夹中
    • 查看我上面的帖子编辑。如果您的网站在音乐文件夹中,您应该使用上述...
    猜你喜欢
    • 2011-09-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-01
    • 1970-01-01
    • 2014-01-10
    相关资源
    最近更新 更多