如何为HTML/CSS/JS音乐播放器添加Add file选项及自定义播放列表视图

1. 基础HTML结构 #

需要提前在页面中置入对应DOM元素：

<!-- 隐藏的音频文件选择器，支持多选、仅筛选音频格式 -->
<input type="file" id="audioFileInput" accept="audio/*" multiple hidden>
<!-- 添加文件按钮 -->
<button id="addFileBtn">Add file to playlist</button>
<!-- 播放列表容器 -->
<ul id="playlistContainer"></ul>
<!-- 全局音频播放器实例 -->
<audio id="audioPlayer" controls></audio>

2. 核心导入逻辑实现 #

// 全局播放列表数组，存储所有导入的音频信息
const playlist = []
const audioFileInput = document.getElementById('audioFileInput')
const addFileBtn = document.getElementById('addFileBtn')
const playlistContainer = document.getElementById('playlistContainer')
const audioPlayer = document.getElementById('audioPlayer')

// 点击添加按钮触发系统文件选择窗口
addFileBtn.addEventListener('click', () => {
  audioFileInput.click()
})

// 监听文件选择事件，处理用户导入的音频
audioFileInput.addEventListener('change', (e) => {
  const files = e.target.files
  if (!files.length) return
  // 遍历所有选中的音频文件
  for (const file of files) {
    // 生成临时可访问的音频地址
    const audioUrl = URL.createObjectURL(file)
    const audioInfo = {
      name: file.name.replace(/\.[^/.]+$/, ""), // 去掉文件后缀的展示名
      url: audioUrl,
      duration: 0 // 可在音频加载后补全时长字段
    }
    playlist.push(audioInfo)
  }
  // 重新渲染播放列表
  renderPlaylist()
  // 清空input值，避免重复选择同一个文件不触发change事件
  audioFileInput.value = ''
})

3. 播放列表渲染与播放逻辑 #

function renderPlaylist() {
  // 清空现有列表内容
  playlistContainer.innerHTML = ''
  // 遍历播放列表生成DOM项
  playlist.forEach((item, index) => {
    const li = document.createElement('li')
    li.textContent = item.name
    // 点击列表项播放对应音频
    li.addEventListener('click', () => {
      audioPlayer.src = item.url
      audioPlayer.play()
    })
    playlistContainer.appendChild(li)
  })
}

注意事项 #

• 上述实现中生成的Blob URL仅在当前页面会话有效，刷新页面后会失效，如果需要实现持久化存储导入的音乐，可以使用IndexedDB存储文件本体，下次打开页面时重新生成Blob URL即可
• 可以自行扩展列表项功能，比如添加删除按钮、展示音频时长、当前播放项高亮等效果
• 如果需要限制导入的音频格式，可以修改input的accept属性，比如仅允许mp3格式则写accept="audio/mp3"

内容的提问来源于stack exchange，提问作者mateuszakustyk29