[HTML5]简单网页本地音乐播放器

最新推荐文章于 2026-05-12 15:41:24 发布

原创

最新推荐文章于 2026-05-12 15:41:24 发布 · 1.1w 阅读

标签

#html5 #js #音乐播放器 #webkitdirectory #multiple

收录于

本文介绍如何使用HTML5创建一个简单的本地音乐播放器。通过利用`<input type="file" />`元素结合`webkitdirectory`属性在Chrome浏览器中实现文件夹选择，从而读取并播放文件夹内的音乐。对于不支持文件夹选择的浏览器，则使用`multiple`属性来选择多个文件。播放器基于`<audio>`标签进行实现。参考了相关文章，但注意到目前仅Chrome支持文件夹选择功能。

既然HTML5提出与本地交互方便，就想写个HTML5的本地音乐播放器。一开始问题主要集中在怎么读取本地文件路径，我想肯定可以用JS实现去操作本地文件（因为node.js很容易实现读取本地文件，但是原生JS怎么写不太清楚），不过简单一点就用<input type="file" />这样只能读取一个，我想做的是最好是把一个文件夹中的都取出来，然后参考http://sapphion.com/2011/11/html5-folder-upload-with-webkitdirectory/ 给file加了个webkitdirectory属性，谷歌浏览器下可以实现，发现目前为止只有谷歌浏览器支持文件夹获取，所以其他浏览器只能为file添加一个 multiple属性，可以一次添加多个文件，我参考了一下http://blog.csdn.net/goodnew/article/details/7355619，不过试了几个浏览器发现文章中为file添加的mozdirectory directory，并未发现有什么用，更坚信了只有谷歌才支持文件夹获取。后面主要问题就是