如何用jQuery实现10个独立电台图标切换时同步currentTime？

嘿，我来帮你把这个电台换台功能扩展到10个独立电台！核心是把每个图标和对应的音频做关联，统一管理播放状态和进度，这样换台时新电台就能完美继承之前的播放时间，模拟真实的电台切换效果。

关键修改思路 #

• 结构关联：给每个图标和对应音频加唯一标识，通过data-*属性快速匹配
• 状态统一管理：维护全局变量记录当前播放的音频实例和播放进度，换台时直接复用这个进度

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>多电台切换模拟</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script>
$(function(){
    // 全局状态：记录当前播放的音频实例、当前播放进度
    let currentAudio = null;
    let currentPlayTime = 0;

    // 监听所有音频的timeupdate事件，实时更新播放进度
    $("audio").on("timeupdate", function() {
        if (this === currentAudio) {
            currentPlayTime = this.currentTime;
        }
    });

    // 绑定所有图标悬停事件
    $(".radio-icon").hover(function() {
        // 获取当前悬停图标对应的电台ID
        const targetRadioId = $(this).data("radio-id");
        // 找到对应的音频元素
        const targetAudio = $(`#radio-${targetRadioId}`)[0];

        // 如果当前有正在播放的音频，先暂停它
        if (currentAudio && currentAudio !== targetAudio) {
            currentAudio.pause();
        }

        // 将目标音频的播放进度设置为当前记录的进度
        targetAudio.currentTime = currentPlayTime;
        // 播放目标音频
        targetAudio.play();
        // 更新当前播放的音频实例
        currentAudio = targetAudio;
    });
})
</script>
<style>
/* 给图标加个样式，看起来更像电台按钮 */
.radio-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin: 10px;
    cursor: pointer;
    background-color: #f5f5f5;
}
.radio-icon:hover {
    background-color: #e0e0e0;
}
</style>
</head>
<body>
<!-- 10个电台图标 -->
<div class="radio-icon" data-radio-id="1">电台1</div>
<div class="radio-icon" data-radio-id="2">电台2</div>
<div class="radio-icon" data-radio-id="3">电台3</div>
<div class="radio-icon" data-radio-id="4">电台4</div>
<div class="radio-icon" data-radio-id="5">电台5</div>
<div class="radio-icon" data-radio-id="6">电台6</div>
<div class="radio-icon" data-radio-id="7">电台7</div>
<div class="radio-icon" data-radio-id="8">电台8</div>
<div class="radio-icon" data-radio-id="9">电台9</div>
<div class="radio-icon" data-radio-id="10">电台10</div>

<!-- 对应10个音频元素 -->
<audio id="radio-1" controls>
<source src="assets/radio1.mp3" type="audio/mpeg">
</audio>
<audio id="radio-2" controls>
<source src="assets/radio2.mp3" type="audio/mpeg">
</audio>
<audio id="radio-3" controls>
<source src="assets/radio3.mp3" type="audio/mpeg">
</audio>
<audio id="radio-4" controls>
<source src="assets/radio4.mp3" type="audio/mpeg">
</audio>
<audio id="radio-5" controls>
<source src="assets/radio5.mp3" type="audio/mpeg">
</audio>
<audio id="radio-6" controls>
<source src="assets/radio6.mp3" type="audio/mpeg">
</audio>
<audio id="radio-7" controls>
<source src="assets/radio7.mp3" type="audio/mpeg">
</audio>
<audio id="radio-8" controls>
<source src="assets/radio8.mp3" type="audio/mpeg">
</audio>
<audio id="radio-9" controls>
<source src="assets/radio9.mp3" type="audio/mpeg">
</audio>
<audio id="radio-10" controls>
<source src="assets/radio10.mp3" type="audio/mpeg">
</audio>
</body>
</html>

代码说明 #

1. 结构关联：每个.radio-icon通过data-radio-id属性和对应id="radio-*"的音频绑定，悬停时能快速定位到目标音频
2. 进度同步：通过timeupdate事件实时记录当前播放音频的进度，换台时直接把这个进度赋值给新电台的音频
3. 状态管理：currentAudio记录当前播放的音频实例，避免重复操作同一音频；换台时先暂停之前的音频，再播放新的

这样不管你后续扩展到多少个电台，只要按照这个结构添加图标和音频，功能就能正常工作啦！

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