Web Audio开发：如何实现电台播放器两个音量滑块联动同步调整？

问题说明 #

你现有代码存在两处核心问题：

1. 仅通过querySelector('[name="volume"]')选中了第一个音量滑块，第二个滑块未被识别、也未绑定任何交互事件，拖动它自然不会生效
2. 音量调整逻辑中没有同步更新另一个滑块的数值，即使两个滑块都绑了事件也无法实现同步变动

修改后的完整JS代码 #

const audio = document.querySelector('#stream')
const playPauseButton = document.querySelector('[name="play-pause"]')
const playPauseButtonIcon = playPauseButton.querySelector('i.fas')
// 选中所有音量滑块，而不是只选第一个
const volumeControls = document.querySelectorAll('.volume')
const currentlyPlaying = document.querySelector('.currently-playing-title')


let isPlaying = false
let fetchInterval = null
let currentVolume = 0.8

audio.volume = currentVolume
// 初始化时同步所有滑块的初始值，和全局音量保持一致
volumeControls.forEach(control => control.value = currentVolume)

const fetchCurrentlyPlaying = () => fetch('...')
    .then(response => response.json())
    .then(data => currentlyPlaying.innerText = data.currentSong)


// 给所有音量滑块绑定事件
volumeControls.forEach(control => {
  control.addEventListener('input', () => {
    const volume = parseFloat(control.value)
    currentVolume = volume
    audio.volume = volume
    // 同步更新所有滑块的数值
    volumeControls.forEach(c => c.value = volume)
  })
})


playPauseButton.addEventListener('click', () => {
    if (isPlaying) {
        audio.pause()

        playPauseButtonIcon.classList.remove('fa-pause')
        playPauseButtonIcon.classList.add('fa-play')

        clearInterval(fetchInterval)
        currentlyPlaying.innerText = 'Er wordt geen nummer gedraaid'
    } else {
        audio.play()

        playPauseButtonIcon.classList.remove('fa-play')
        playPauseButtonIcon.classList.add('fa-pause')

        fetchCurrentlyPlaying()
        fetchInterval = setInterval(fetchCurrentlyPlaying, 3000)
    }

    isPlaying = !isPlaying
})

修改点说明 #

• 替换滑块选择逻辑，选中所有带有volume类的滑块
• 新增初始化同步逻辑，页面加载时就把所有滑块的数值和全局初始音量对齐
• 给每个滑块都绑定输入事件，任意滑块触发调整时，同步更新所有滑块的数值和音频的实际音量

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