Я работаю над пользовательским виджетом аудиоплеера. Код работает на статической 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? Я делаю что-то не так и схожу с рук в одном браузере, а не в другом?