HTML5 аудио не работает с Wordpress + Firefox - PullRequest
0 голосов
/ 06 января 2019

Я работаю над пользовательским виджетом аудиоплеера. Код работает на статической HTML-странице в Firefox и Chromium. Код также работает на сайте Wordpress в Chromium. Однако при просмотре страницы Wordpress в Firefox обещание застревает как pending и никогда не разрешается.

Вот сокращенная версия скрипта:

window.addEventListener('load', () => {

  function addAudio(podcast) {
    let container = document.getElementById('audio-container')

    if (container === null) {
      const body = document.getElementsByTagName('body')[0]
      container = document.createElement('div')  
      container.setAttribute('id', 'audio-container')
      body.insertBefore(container, body.firstChild)
    }

    const audio = document.createElement('audio')
    audio.setAttribute('id', 'audio-media')
    container.appendChild(audio)

    const source = document.createElement('source')
    source.setAttribute('src', podcast.audio)
    audio.appendChild(source)
  }

  document.getElementById('play-button').addEventListener('click', function() {
    playAudio()
  }

  function playAudio() {
    const audio = document.getElementById('audio-media')
    let playPromise = audio.play()

    console.log('playPromise', playPromise)

    if (playPromise !== undefined) {
      playPromise.then(() => {
        console.log('success')
      }).catch(err => {
        console.log("ERROR", err)
      })
    } else {
      console.log('playPromise is undefined')
    }
  }

  addAudio(currentTrack)

})

Когда я запускаю это на статической странице в Chromium или Firefox или когда я запускаю это как виджет Wordpress, я получаю следующий вывод:

playPromise Promise {<pending>}
success

и трек начинает воспроизводиться. Однако когда я запускаю это как виджет Wordpress в Firefox, я получаю только playPromise Promise {<pending>}. Иногда я тоже получаю это:

Ignoring get or set of property that has [LenientThis] because the “this” object is incorrect.

За исключением того, что я не использую this где-либо в своем коде, и я нашел вещи в других местах, подразумевающие, что предупреждение может быть связано с ошибкой в ​​Firefox.

Еще страннее, если я даже попробую простой аудиокомпонент HTML5 в плагине Wordpress:

<audio controls>
  <source src="../path/to/track.mp3" type="audio/mp3">
</audio>

Firefox выйдет из строя и застрянет в состоянии загрузки (остальная часть страницы загружается, но дорожка никогда не запускается). Опять же, в качестве статической страницы это работает нормально, а в качестве плагина Wordpress, доступ к которому осуществляется через Chromium, - отлично.

Кроме того, использование родного плеера Wordpress (который использует элементы аудио под капотом) не работает в Firefox:

<?php $attr = array(
  'src' => $feedz[0]['audio'], 
  'loop' => '', 
  'autoplay' => '', 
  'preload' => 'none' ); 
echo wp_audio_shortcode( $attr ); ?>

Дополнительные детали:

  • Debian 9
  • Локально размещается с Apache 2
  • Firefox 60.4.0esr
  • Версия Chromium 71.0.3578.80

Что заставляет обещание зависать во время ожидания, а не сбой?

Это ошибка в Firefox? Wordpress? Я делаю что-то не так и схожу с рук в одном браузере, а не в другом?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...