如何在 html 音频控制中播放本地文件夹中的音乐？ [复制]

Posted 2023-02-25

【中文标题】如何在 html 音频控制中播放本地文件夹中的音乐？ [复制]

【英文标题】：How to play music from local folder in html audio control? [duplicate]

【发布时间】：2017-10-27 16:40:23

【问题描述】：

这里是音频控制。当我将路径放在浏览器中时，什么都没有显示。

    <audio  controls="controls">
        <source src="E:/Songs/ROCK ON2/Rock On 2/You Know What I Mean(Mr-Jatt.com).mp3" />
    </audio>

【参考方案1】：

您需要对文件路径进行 url 编码。它不知道如何处理文件名中的空格。所以要么encode it要么删除该路径每个部分的所有空格。

【讨论】：

如果我从路径中删除空格，路径将会改变。

嗯，是的。这正是我在这里所说的。您需要以某种方式符合该路径，无论是手动还是使用 encodeURI。

我给了 src="E:/Lean On-(Mr-Jatt.com).mp3" 这是正确的路径。但它仍然无法播放歌曲。以及如何使用encodeURI？？

检查我的答案中的链接。

【参考方案2】：

如果您尝试播放本地文件，您可以使用<input type="file"> 将文件作为File 对象获取并创建文件的Blob URL 以在change 事件的<audio> 元素的.src 处设置<input type="file"> 元素。

<input type="file">
<audio controls></audio>
<script>
var input = document.querySelector("input[type=file]");
var audio = document.querySelector("audio");
input.onchange = function() 
  audio.src = URL.createObjectURL(input.files[0]);

</script>

【讨论】：

实际上我有一个完整路径的歌曲列表。所以我希望当我点击任何歌曲时音频控件应该播放歌曲。

你在哪个浏览器上尝试代码？

你没有明白我的意思。我不想通过fileupload选择文件，我想直接播放。

@Swadesh “你没有明白我的意思。”你没有在之前的评论中回答这个问题。您在哪个浏览器上尝试代码？

我正在使用谷歌浏览器。