Блог

Я создал пользовательский аудиоплеер HTML, и у меня возникла еще одна ошибка с ним на мобильном телефоне

Вы можете посмотреть его здесь https://dolbydev.wpengine.com/audio-player/

По какой-то причине, когда я пытаюсь отрегулировать громкость с помощью ползунка диапазона громкости, громкость не меняется. Эта проблема возникает только на мобильных устройствах

Я думал, что это может быть как-то связано с прослушивателями событий, которые я использую, но я не думаю, что в этом проблема, Как вы видите в моем коде, вы заметите, что я загружаю нужное событие при обнаружении мобильного телефона, что в данном случае touchend

Я также зарегистрировал значения в консоли, и они меняются при перемещении ползунка громкости и тестировании на iOS safari

Я в недоумении относительно того, в чем проблема с мобильным телефоном. У кого-нибудь есть какие-либо идеи о том, почему это может быть

     const volumeSlider = audioPlayerBlockContainer.getElementsByClassName('audioplayer_volume_slider')[0];
    const isDevice = /ipad|iphone|ipod|android/i.test(window.navigator.userAgent.toLowerCase()) amp;amp; !window.MSStream;
    const volumeSliderEvent = (isDevice ? 'touchend' : 'input') 

    const audio1 = new Audio(audioFileSwitchOff);
    const audio2 = new Audio(audioFileSwitchOn);

    volumeSlider.addEventListener(volumeSliderEvent, (e) => {
        const value = e.target.value;

        audio1.volume = value / 100
        audio2.volume = value / 100

        console.log(volumeSliderEvent)
        console.log(`Audio 1: ${audio1.volume}`)
        console.log(`Audio 2: ${audio2.volume}`)
    })