怎么用play创建播放器并自定义音频控件方法

在网页音频开发场景中，使用play相关方法创建播放器并自定义音频控件，能够摆脱浏览器默认控件的样式限制，实现更符合产品需求的播放功能。下面我们就一步步讲解具体的实现过程。

基础音频播放器搭建

首先我们需要创建基础的音频元素，然后通过JavaScript调用play方法实现播放功能。基础的音频元素不需要显示默认控件，后续我们会自己实现控制逻辑。

<!-- 隐藏默认控件的音频元素 -->
<audio id="myAudio" src="https://ipipp.com/audio/test.mp3"></audio>
<!-- 自定义控件容器 -->
<div class="custom-player">
    <button id="playBtn">播放</button>
    <div class="progress-bar">
        <div class="progress"></div>
    </div>
    <span id="timeDisplay">00:00 / 00:00</span>
    <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
</div>

核心播放暂停功能实现

播放暂停是最基础的功能，我们需要监听自定义按钮的点击事件，调用音频元素的play()方法和pause()方法，同时切换按钮的显示文本。

// 获取音频元素和播放按钮
const audio = document.getElementById('myAudio');
const playBtn = document.getElementById('playBtn');

// 播放暂停切换逻辑
playBtn.addEventListener('click', () => {
    if (audio.paused) {
        // 调用play方法开始播放
        audio.play();
        playBtn.textContent = '暂停';
    } else {
        audio.pause();
        playBtn.textContent = '播放';
    }
});

// 音频播放结束时重置按钮状态
audio.addEventListener('ended', () => {
    playBtn.textContent = '播放';
});

自定义进度条功能实现

默认进度条样式难以自定义，我们可以通过监听音频的timeupdate事件更新进度，同时监听进度条的点击事件实现跳转播放。

// 获取进度条相关元素
const progressBar = document.querySelector('.progress-bar');
const progress = document.querySelector('.progress');
const timeDisplay = document.getElementById('timeDisplay');

// 格式化时间显示，将秒转换为分:秒格式
function formatTime(seconds) {
    const min = Math.floor(seconds / 60);
    const sec = Math.floor(seconds % 60);
    return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
}

// 监听音频播放进度更新
audio.addEventListener('timeupdate', () => {
    // 计算当前进度百分比
    const percent = (audio.currentTime / audio.duration) * 100;
    progress.style.width = `${percent}%`;
    // 更新时间显示
    timeDisplay.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
});

// 点击进度条跳转播放
progressBar.addEventListener('click', (e) => {
    // 计算点击位置在进度条中的占比
    const rect = progressBar.getBoundingClientRect();
    const clickPercent = (e.clientX - rect.left) / rect.width;
    // 设置音频当前播放时间
    audio.currentTime = clickPercent * audio.duration;
});

音量控制功能实现

音量控制可以通过range类型的输入框实现，监听输入框的变化修改音频元素的volume属性即可。

// 获取音量滑块元素
const volumeSlider = document.getElementById('volumeSlider');

// 监听音量滑块变化
volumeSlider.addEventListener('input', () => {
    // 设置音频音量，取值范围0-1
    audio.volume = volumeSlider.value;
});

样式优化建议

自定义控件完成后，我们可以通过CSS调整样式，让播放器更符合页面设计。以下是一些基础的样式参考：

.custom-player {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 8px;
    width: 500px;
}

#playBtn {
    padding: 5px 15px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background-color: #409eff;
    color: white;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background-color: #ddd;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.progress {
    height: 100%;
    background-color: #409eff;
    border-radius: 3px;
    width: 0%;
}

#volumeSlider {
    width: 80px;
}

常见问题说明

• 调用play()方法时如果音频未加载完成，可能会报错，建议先监听音频的canplay事件再允许播放操作。
• 部分浏览器要求音频播放必须由用户主动触发，自动播放可能会被拦截，需要做好兼容处理。
• 如果音频地址是跨域资源，需要服务端配置对应的跨域头，否则可能无法获取音频时长等信息。

play音频播放器自定义控件audio_API修改时间：2026-06-14 14:15:34