html5音乐播放器基于元素实现，支持默认控件或javascript自定义ui，具备播放/暂停、进度控制、多曲切换、加载状态提示及错误处理，需注意移动端手势触发和cors配置。
用 HTML5 构建一个简单的音乐流媒体播放器，核心是利用 <audio></audio> 元素配合 JavaScript 控制逻辑，无需插件，兼容现代浏览器。
基础结构：HTML + 内置音频控件
最简方案直接使用 <audio></audio> 标签，浏览器自动提供播放、暂停、音量、进度条等 UI：
- 添加
controls属性启用默认控件 - 用
src指向 MP3 或其他支持格式（如 Ogg、WAV）的音频文件 URL - 可选添加
preload="metadata"提前加载时长和封面信息，提升体验
示例代码：
自定义播放控制：JavaScript 基础操作
隐藏默认控件，用按钮和进度条实现自主 UI：
- 用
play()、pause()方法控制播放状态 - 监听
timeupdate事件实时更新进度条值（currentTime / duration） - 点击进度条时计算目标时间并赋值给
currentTime - 监听
ended事件实现“播放完自动切换下一首”逻辑
注意：移动端需用户手势触发播放（如点击按钮），不能自动 play()。
支持多首歌曲：简单播放列表管理
用数组存储歌曲信息，配合索引切换：
- 每个歌曲对象包含
title、artist、src字段 - 当前播放索引（
currentTrackIndex）用于定位和更新 UI - 点击“上一首/下一首”时更新索引，并调用
load()+play() - 可结合
audio.readyState判断是否已加载完成，避免播放失败
增强体验：加载状态与错误处理
提升稳定性与用户感知：
- 监听
waiting和playing事件显示加载中动画或播放中提示 - 捕获
error事件，检查audio.error.code（如 4 表示网络错误）并给出友好提示 - 对 CORS 资源，确保服务端返回
Access-Control-Allow-Origin头，否则跨域音频无法播放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
