jQuery playPromise не работает в скрипте для звука при наведении - PullRequest
Новая
       131

jQuery playPromise не работает в скрипте для звука при наведении

0 голосов
/ 02 августа 2020

Согласно этому руководству https://developers.google.com/web/updates/2016/03/play-returns-promise Я пытаюсь реализовать playPromise в своем коде. Причина: изменилась политика Google chrome, и теперь автовоспроизведение больше не работает из коробки.

Инструкции:

Теперь вызов play () для элемента a или возвращает обещание. Если воспроизведение завершается успешно, Promise выполняется, а если воспроизведение не удается, Promise отклоняется вместе с сообщением об ошибке, объясняющим сбой. Это позволяет вам писать интуитивно понятный код вроде следующего: var playPromise = document.querySelector ('video'). Play (); 

 // In browsers that don’t yet support this functionality,
    // playPromise won’t be defined.
    if (playPromise !== undefined) {
      playPromise.then(function() {
        // Automatic playback started!
      }).catch(function(error) {
        // Automatic playback failed.
        // Show a UI element to let the user manually start playback.
      });
    }

Вот мой полный код в скрипке: https://jsfiddle.net/jackbauer/k6qu70jr/14/

Вот что я пробовал: 

jQuery(function($) { 
  $(".parentlogomarca").hover(function() {  
if (html5audio !== undefined) {
  html5audio.then(function() {            
    $(".el-blogomarca,.el-alogomarca").toggle();
        }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
  });
}

Это ошибка, которую я получал раньше: 

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

И это ошибка, которую я ' м получаю сейчас: 

defaultscripts.js:95 Uncaught ReferenceError: html5audio is not defined
    at HTMLDivElement.<anonymous> (defaultscripts.js:95)
    at HTMLDivElement.handle (jquery.js:3)
    at HTMLDivElement.dispatch (jquery.js:3)
    at HTMLDivElement.r.handle (jquery.js:3)

А вот мой полный js код на всякий случай: 

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Seu navegador não suporta audio em HTML5.")}}
}
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("https://vgmdownloads.com/soundtracks/street-fighter-2-turbo/iicfyvjk/04.%20Vs.mp3")
var clicksound=createsoundbite("https://vgmdownloads.com/soundtracks/street-fighter-2-turbo/iicfyvjk/04.%20Vs.mp3")

jQuery(function($) { 
      $(".parentlogomarca").hover(function() {  
    if (html5audio !== undefined) {
      html5audio.then(function() {            
        $(".el-blogomarca,.el-alogomarca").toggle();
            }).catch(function(error) {
        // Automatic playback failed.
        // Show a UI element to let the user manually start playback.
      });
    }
...