首页html js获取本地音乐

html js获取本地音乐

时间: 2023-09-11 16:01:40 浏览: 153

要在HTML和JavaScript中获取本地音乐，可以使用HTML5新功能中的文件API。下面是一个简单的示例代码，展示了如何通过文件选择器上传本地音乐文件并获取其信息： ```html <!DOCTYPE html> <html> <head> <title>获取本地音乐</title> </head> <body> <input type="file" id="musicFile" accept="audio/*" /> <div id="musicInfo"></div> <script> document.getElementById('musicFile').addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { const audio = new Audio(); audio.src = e.target.result; const musicInfo = document.getElementById('musicInfo'); musicInfo.innerHTML = ` <p>音乐文件名: ${file.name}</p> <p>音乐类型: ${file.type}</p> <p>音乐时长: ${audio.duration.toFixed(2)}秒</p> `; }; reader.readAsDataURL(file); } }); </script> </body> </html> ``` 在上述代码中，我们创建了一个包含文件选择器和用于显示音乐信息的`<div>`元素。当用户选择一个音乐文件后，通过`change`事件监听器获取到该文件，并使用`FileReader`对象读取文件内容。读取完成后，我们创建了一个新的`Audio`对象，将音乐文件的数据作为其`src`属性，并通过`duration`属性获取音乐时长。最后，我们将音乐文件的信息显示在页面上。需要注意的是，在某些浏览器上，为了保证能够读取本地文件，需要在服务器环境下运行该代码。此外，由于每个浏览器支持的文件类型可能不同，可以使用`accept`属性来限制文件选择器只显示音频文件（`audio/*`）。

阅读全文