下面我将从基础实现、进阶功能、最佳实践三个方面,为你提供一个全面的指南。
（图片来源网络，侵删）
基础实现：使用 HTML5 <audio>
这是最核心、最基础的步骤，HTML5 提供了原生的音频播放能力。
HTML 结构
<audio id="myAudio" src="your-audio-file.mp3"></audio>
id: 用于在 JavaScript 中操作这个元素。src: 音频文件的路径，建议使用 .mp3 格式,因为它兼容性最好。
CSS 样式
为了让播放器在手机上看起来更美观,我们可以添加一些基本的样式。
.audio-player {
width: 100%;
max-width: 400px;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #f8f9fa;
padding: 15px;
}
/* 控制按钮样式 */
.audio-controls button {
background: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 16px; /* 手机端按钮要足够大 */
margin: 0 5px;
}
.audio-controls button:hover {
background: #0056b3;
}
/* 进度条样式 */
.audio-progress {
width: 100%;
height: 8px;
-webkit-appearance: none; /* 隐藏默认样式 */
appearance: none;
background: #ddd;
border-radius: 5px;
margin: 10px 0;
}
.audio-progress::-webkit-slider-thumb { /* 针对 Chrome/Safari */
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
}
.audio-progress::-moz-range-thumb { /* 针对 Firefox */
width: 20px;
height: 20px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
}
JavaScript 交互
这是让播放器“活”起来的关键，我们需要监听用户的操作,并控制音频的播放。
const audio = document.getElementById('myAudio');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const currentTimeSpan = document.getElementById('currentTime');
const durationSpan = document.getElementById('duration');
// 播放/暂停按钮点击事件
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '暂停';
} else {
audio.pause();
playPauseBtn.textContent = '播放';
}
});
// 当元数据加载完成时，显示总时长
audio.addEventListener('loadedmetadata', () => {
durationSpan.textContent = formatTime(audio.duration);
});
// 当音频播放时，更新进度条
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.value = progress;
currentTimeSpan.textContent = formatTime(audio.currentTime);
});
// 当用户拖动进度条时，跳转到指定位置
progressBar.addEventListener('input', () => {
const time = progressBar.value * audio.duration / 100;
audio.currentTime = time;
});
// 格式化时间 (将 125 秒格式化为 "02:05")
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}
基础版总结：通过 audio, button, input[type="range"] 等标签和 JavaScript，我们实现了一个最简单的播放器，但它在手机上体验不佳,比如无法自动播放。
（图片来源网络，侵删）
进阶功能与移动端优化
移动端浏览器（如 Safari on iOS）有严格的策略来限制音频的自动播放，以节省流量和提升用户体验，要实现流畅的播放,需要解决以下问题。
解决自动播放问题
策略：不要尝试在页面加载时自动播放，最佳实践是通过一个明确的用户交互（比如点击一个“开始播放”的按钮）来触发音频的播放，这既符合浏览器策略,也是良好的用户体验。
// 在页面上放一个醒目的“开始播放”按钮
const startBtn = document.getElementById('startBtn');
startBtn.addEventListener('click', () => {
// 首先播放音频
audio.play();
// 然后隐藏这个按钮
startBtn.style.display = 'none';
// 显示播放器控制界面
document.querySelector('.audio-player').style.display = 'block';
});
后台播放与屏幕常亮
当用户切换到其他 App 或锁屏时，音频默认会停止，我们可以利用 Web Audio API 和 Screen Wake Lock API 来改善这一点。
注意：这些 API 仍然比较新，需要谨慎使用,并检查浏览器兼容性。
（图片来源网络，侵删）
// 1. 使用 Web Audio API 让音频在后台播放
let audioContext;
let audioSource;
function setupAudioContext() {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
audioSource = audioContext.createMediaElementSource(audio);
audioSource.connect(audioContext.destination);
}
}
// 在用户第一次交互时（例如点击播放按钮）初始化
playPauseBtn.addEventListener('click', () => {
if (audioContext && audioContext.state === 'suspended') {
audioContext.resume();
}
setupAudioContext();
// ... 原有的播放/暂停逻辑
});
// 2. 使用 Screen Wake Lock API 保持屏幕常亮
let wakeLock = null;
async function requestWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
console.log('屏幕常亮已开启');
}
} catch (err) {
console.error('无法请求屏幕常亮:', err);
}
}
function releaseWakeLock() {
if (wakeLock !== null) {
wakeLock.release();
wakeLock = null;
console.log('屏幕常亮已释放');
}
}
// 在播放时请求常亮，暂停时释放
audio.addEventListener('play', requestWakeLock);
audio.addEventListener('pause', releaseWakeLock);
audio.addEventListener('ended', releaseWakeLock);
更美观的播放器UI
使用纯 CSS 实现一个现代感的播放器可能会很复杂，可以考虑使用成熟的 CSS 框架或播放器库。
推荐库：Howler.js
Howler.js 是一个强大的音频库，它封装了 Web Audio API，提供了更好的跨浏览器兼容性和更简洁的 API,特别适合处理后台播放等复杂场景。
简单示例：
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<script>
// 创建一个 Howl 实例
const sound = new Howl({
src: ['your-audio-file.mp3'],
html5: true, // 使用 HTML5 Audio API，适合流式播放
onplay: function() {
console.log('音频开始播放');
},
onend: function() {
console.log('音频播放结束');
}
});
// 播放按钮
document.getElementById('playBtn').addEventListener('click', () => {
sound.play();
});
// 暂停按钮
document.getElementById('pauseBtn').addEventListener('click', () => {
sound.pause();
});
</script>
最佳实践与注意事项
-
音频格式：
- MP3：兼容性最好,几乎所有浏览器都支持。
- AAC (m4a)：在 Apple 设备上效率更高,音质更好。
- WebM/Opus：现代、开源、高效，但兼容性稍差（特别是旧版浏览器）。
- 最佳实践：提供 MP3 和 AAC 两种格式,让浏览器选择它支持的。
-
响应式设计：
- 确保播放器在所有手机屏幕尺寸上都能正常显示，使用
width: 100% 和 max-width 来控制播放器宽度。
-
无障碍性 (Accessibility)：
- 为按钮添加
aria-label 属性,方便屏幕阅读器识别。
- 使用
<label> 关联进度条,让用户知道这是什么控件。
- 考虑添加键盘控制（例如空格键播放/暂停）。
-
性能优化：
- 如果音频文件很大，考虑使用流式传输，HTML5 的
<audio> 标签天生支持流式播放，只要服务器配置正确（如支持 Range 请求）。
- 对于长音频（如播客）,提供倍速播放功能会是一个很好的加分项。
-
用户交互：
- 音量控制：在手机上，通常使用系统音量控制即可，可以省略播放器内的音量条,让界面更简洁。
- 加载状态：在音频加载时，显示一个加载动画,提升用户体验。
完整示例代码 (进阶版)
结合了上述大部分功能的一个完整示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">手机音频播放器</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f0f2f5; }
.container { text-align: center; padding: 20px; }
h1 { font-size: 24px; color: #333; }
/* 初始播放按钮 */
#startScreen {
display: block;
}
#startScreen button {
background-color: #007bff;
color: white;
border: none;
padding: 15px 40px;
font-size: 18px;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
/* 播放器主体 */
#audioPlayer {
display: none;
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
padding: 20px;
max-width: 350px;
margin: 20px auto;
}
.track-info h2 { font-size: 18px; margin: 0; }
.track-info p { color: #666; font-size: 14px; margin: 5px 0 15px 0; }
.progress-container {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.time { font-size: 12px; color: #666; min-width: 40px; }
.progress-bar {
flex-grow: 1;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: #e0e0e0;
border-radius: 3px;
cursor: pointer;
}
.progress-bar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.controls button {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
color: #333;
padding: 10px;
}
.controls button.play-pause {
background-color: #007bff;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<h1>我的音乐播放器</h1>
<!-- 初始播放按钮 -->
<div id="startScreen">
<button id="startBtn">点击开始播放</button>
</div>
<!-- 音频播放器 -->
<div id="audioPlayer">
<div class="track-info">
<h2>示例歌曲</h2>
<p>示例艺术家</p>
</div>
<div class="progress-container">
<span class="time" id="currentTime">0:00</span>
<input type="range" class="progress-bar" id="progressBar" value="0" min="0" max="100">
<span class="time" id="duration">0:00</span>
</div>
<div class="controls">
<button id="prevBtn">⏮</button>
<button id="playPauseBtn" class="play-pause">▶</button>
<button id="nextBtn">⏭</button>
</div>
</div>
<!-- 隐藏的 audio 元素 -->
<audio id="myAudio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
</div>
<script>
const audio = document.getElementById('myAudio');
const startScreen = document.getElementById('startScreen');
const audioPlayer = document.getElementById('audioPlayer');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const currentTimeSpan = document.getElementById('currentTime');
const durationSpan = document.getElementById('duration');
const startBtn = document.getElementById('startBtn');
// --- 初始化 ---
startBtn.addEventListener('click', () => {
audio.play();
startScreen.style.display = 'none';
audioPlayer.style.display = 'block';
});
// --- 播放/暂停逻辑 ---
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '⏸';
} else {
audio.pause();
playPauseBtn.textContent = '▶';
}
});
// --- 时间更新逻辑 ---
audio.addEventListener('loadedmetadata', () => {
durationSpan.textContent = formatTime(audio.duration);
});
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.value = progress;
currentTimeSpan.textContent = formatTime(audio.currentTime);
});
// --- 进度条拖动 ---
progressBar.addEventListener('input', () => {
const time = (progressBar.value / 100) * audio.duration;
audio.currentTime = time;
});
// --- 播放结束 ---
audio.addEventListener('ended', () => {
playPauseBtn.textContent = '▶';
progressBar.value = 0;
currentTimeSpan.textContent = '0:00';
});
// --- 工具函数 ---
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
</script>
</body>
</html>
这个完整示例包含了用户触发播放、美观的UI、进度条控制和时间显示，并且针对移动端做了优化（如 user-scalable=no 和大按钮），你可以直接复制这段代码到一个 .html 文件中,用手机浏览器打开测试。
这是最核心、最基础的步骤，HTML5 提供了原生的音频播放能力。
HTML 结构
<audio id="myAudio" src="your-audio-file.mp3"></audio>
id: 用于在 JavaScript 中操作这个元素。src: 音频文件的路径，建议使用.mp3格式,因为它兼容性最好。
CSS 样式
为了让播放器在手机上看起来更美观,我们可以添加一些基本的样式。
.audio-player {
width: 100%;
max-width: 400px;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #f8f9fa;
padding: 15px;
}
/* 控制按钮样式 */
.audio-controls button {
background: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 16px; /* 手机端按钮要足够大 */
margin: 0 5px;
}
.audio-controls button:hover {
background: #0056b3;
}
/* 进度条样式 */
.audio-progress {
width: 100%;
height: 8px;
-webkit-appearance: none; /* 隐藏默认样式 */
appearance: none;
background: #ddd;
border-radius: 5px;
margin: 10px 0;
}
.audio-progress::-webkit-slider-thumb { /* 针对 Chrome/Safari */
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
}
.audio-progress::-moz-range-thumb { /* 针对 Firefox */
width: 20px;
height: 20px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
}
JavaScript 交互
这是让播放器“活”起来的关键，我们需要监听用户的操作,并控制音频的播放。
const audio = document.getElementById('myAudio');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const currentTimeSpan = document.getElementById('currentTime');
const durationSpan = document.getElementById('duration');
// 播放/暂停按钮点击事件
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '暂停';
} else {
audio.pause();
playPauseBtn.textContent = '播放';
}
});
// 当元数据加载完成时，显示总时长
audio.addEventListener('loadedmetadata', () => {
durationSpan.textContent = formatTime(audio.duration);
});
// 当音频播放时，更新进度条
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.value = progress;
currentTimeSpan.textContent = formatTime(audio.currentTime);
});
// 当用户拖动进度条时，跳转到指定位置
progressBar.addEventListener('input', () => {
const time = progressBar.value * audio.duration / 100;
audio.currentTime = time;
});
// 格式化时间 (将 125 秒格式化为 "02:05")
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}
基础版总结：通过 audio, button, input[type="range"] 等标签和 JavaScript，我们实现了一个最简单的播放器，但它在手机上体验不佳,比如无法自动播放。
（图片来源网络，侵删）
进阶功能与移动端优化
移动端浏览器（如 Safari on iOS）有严格的策略来限制音频的自动播放，以节省流量和提升用户体验，要实现流畅的播放,需要解决以下问题。
解决自动播放问题
策略：不要尝试在页面加载时自动播放，最佳实践是通过一个明确的用户交互（比如点击一个“开始播放”的按钮）来触发音频的播放，这既符合浏览器策略,也是良好的用户体验。
// 在页面上放一个醒目的“开始播放”按钮
const startBtn = document.getElementById('startBtn');
startBtn.addEventListener('click', () => {
// 首先播放音频
audio.play();
// 然后隐藏这个按钮
startBtn.style.display = 'none';
// 显示播放器控制界面
document.querySelector('.audio-player').style.display = 'block';
});
后台播放与屏幕常亮
当用户切换到其他 App 或锁屏时，音频默认会停止，我们可以利用 Web Audio API 和 Screen Wake Lock API 来改善这一点。
注意：这些 API 仍然比较新，需要谨慎使用,并检查浏览器兼容性。
（图片来源网络，侵删）
// 1. 使用 Web Audio API 让音频在后台播放
let audioContext;
let audioSource;
function setupAudioContext() {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
audioSource = audioContext.createMediaElementSource(audio);
audioSource.connect(audioContext.destination);
}
}
// 在用户第一次交互时（例如点击播放按钮）初始化
playPauseBtn.addEventListener('click', () => {
if (audioContext && audioContext.state === 'suspended') {
audioContext.resume();
}
setupAudioContext();
// ... 原有的播放/暂停逻辑
});
// 2. 使用 Screen Wake Lock API 保持屏幕常亮
let wakeLock = null;
async function requestWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
console.log('屏幕常亮已开启');
}
} catch (err) {
console.error('无法请求屏幕常亮:', err);
}
}
function releaseWakeLock() {
if (wakeLock !== null) {
wakeLock.release();
wakeLock = null;
console.log('屏幕常亮已释放');
}
}
// 在播放时请求常亮，暂停时释放
audio.addEventListener('play', requestWakeLock);
audio.addEventListener('pause', releaseWakeLock);
audio.addEventListener('ended', releaseWakeLock);
更美观的播放器UI
使用纯 CSS 实现一个现代感的播放器可能会很复杂，可以考虑使用成熟的 CSS 框架或播放器库。
推荐库：Howler.js Howler.js 是一个强大的音频库，它封装了 Web Audio API，提供了更好的跨浏览器兼容性和更简洁的 API,特别适合处理后台播放等复杂场景。
简单示例：
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<script>
// 创建一个 Howl 实例
const sound = new Howl({
src: ['your-audio-file.mp3'],
html5: true, // 使用 HTML5 Audio API，适合流式播放
onplay: function() {
console.log('音频开始播放');
},
onend: function() {
console.log('音频播放结束');
}
});
// 播放按钮
document.getElementById('playBtn').addEventListener('click', () => {
sound.play();
});
// 暂停按钮
document.getElementById('pauseBtn').addEventListener('click', () => {
sound.pause();
});
</script>
最佳实践与注意事项
-
音频格式：
- MP3：兼容性最好,几乎所有浏览器都支持。
- AAC (m4a)：在 Apple 设备上效率更高,音质更好。
- WebM/Opus：现代、开源、高效，但兼容性稍差（特别是旧版浏览器）。
- 最佳实践：提供 MP3 和 AAC 两种格式,让浏览器选择它支持的。
-
响应式设计：
- 确保播放器在所有手机屏幕尺寸上都能正常显示，使用
width: 100%和max-width来控制播放器宽度。
- 确保播放器在所有手机屏幕尺寸上都能正常显示，使用
-
无障碍性 (Accessibility)：
- 为按钮添加
aria-label属性,方便屏幕阅读器识别。 - 使用
<label>关联进度条,让用户知道这是什么控件。 - 考虑添加键盘控制（例如空格键播放/暂停）。
- 为按钮添加
-
性能优化：
- 如果音频文件很大，考虑使用流式传输，HTML5 的
<audio>标签天生支持流式播放，只要服务器配置正确（如支持Range请求）。 - 对于长音频（如播客）,提供倍速播放功能会是一个很好的加分项。
- 如果音频文件很大，考虑使用流式传输，HTML5 的
-
用户交互：
- 音量控制：在手机上，通常使用系统音量控制即可，可以省略播放器内的音量条,让界面更简洁。
- 加载状态：在音频加载时，显示一个加载动画,提升用户体验。
完整示例代码 (进阶版)
结合了上述大部分功能的一个完整示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">手机音频播放器</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f0f2f5; }
.container { text-align: center; padding: 20px; }
h1 { font-size: 24px; color: #333; }
/* 初始播放按钮 */
#startScreen {
display: block;
}
#startScreen button {
background-color: #007bff;
color: white;
border: none;
padding: 15px 40px;
font-size: 18px;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
/* 播放器主体 */
#audioPlayer {
display: none;
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
padding: 20px;
max-width: 350px;
margin: 20px auto;
}
.track-info h2 { font-size: 18px; margin: 0; }
.track-info p { color: #666; font-size: 14px; margin: 5px 0 15px 0; }
.progress-container {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.time { font-size: 12px; color: #666; min-width: 40px; }
.progress-bar {
flex-grow: 1;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: #e0e0e0;
border-radius: 3px;
cursor: pointer;
}
.progress-bar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.controls button {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
color: #333;
padding: 10px;
}
.controls button.play-pause {
background-color: #007bff;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<h1>我的音乐播放器</h1>
<!-- 初始播放按钮 -->
<div id="startScreen">
<button id="startBtn">点击开始播放</button>
</div>
<!-- 音频播放器 -->
<div id="audioPlayer">
<div class="track-info">
<h2>示例歌曲</h2>
<p>示例艺术家</p>
</div>
<div class="progress-container">
<span class="time" id="currentTime">0:00</span>
<input type="range" class="progress-bar" id="progressBar" value="0" min="0" max="100">
<span class="time" id="duration">0:00</span>
</div>
<div class="controls">
<button id="prevBtn">⏮</button>
<button id="playPauseBtn" class="play-pause">▶</button>
<button id="nextBtn">⏭</button>
</div>
</div>
<!-- 隐藏的 audio 元素 -->
<audio id="myAudio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
</div>
<script>
const audio = document.getElementById('myAudio');
const startScreen = document.getElementById('startScreen');
const audioPlayer = document.getElementById('audioPlayer');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const currentTimeSpan = document.getElementById('currentTime');
const durationSpan = document.getElementById('duration');
const startBtn = document.getElementById('startBtn');
// --- 初始化 ---
startBtn.addEventListener('click', () => {
audio.play();
startScreen.style.display = 'none';
audioPlayer.style.display = 'block';
});
// --- 播放/暂停逻辑 ---
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '⏸';
} else {
audio.pause();
playPauseBtn.textContent = '▶';
}
});
// --- 时间更新逻辑 ---
audio.addEventListener('loadedmetadata', () => {
durationSpan.textContent = formatTime(audio.duration);
});
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.value = progress;
currentTimeSpan.textContent = formatTime(audio.currentTime);
});
// --- 进度条拖动 ---
progressBar.addEventListener('input', () => {
const time = (progressBar.value / 100) * audio.duration;
audio.currentTime = time;
});
// --- 播放结束 ---
audio.addEventListener('ended', () => {
playPauseBtn.textContent = '▶';
progressBar.value = 0;
currentTimeSpan.textContent = '0:00';
});
// --- 工具函数 ---
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
</script>
</body>
</html>
这个完整示例包含了用户触发播放、美观的UI、进度条控制和时间显示，并且针对移动端做了优化（如 user-scalable=no 和大按钮），你可以直接复制这段代码到一个 .html 文件中,用手机浏览器打开测试。
