jQuery playPromise not working in script for audio on hover

jQuery playPromise not working in script for audio on hover

As per this tutorial https://developers.google.com/web/updates/2016/03/play-returns-promise I'm trying to implement playPromise in my code. The reason: Google chrome policy changed and now autoplay is not working out of the box anymore.

The instructions:

A play() call on an a or element now returns a Promise. If playback succeeds, the Promise is fulfilled, and if playback fails, the Promise is rejected along with an error message explaining the failure. This lets you write intuitive code like the following: var playPromise = document.querySelector('video').play(); 

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

Here's my full code in a fiddle: https://jsfiddle.net/jackbauer/k6qu70jr/14/

Here's what I tried:

 
    
  
  1. jQuery(function($) { $
    2. 
  
  2.  $(".parentlogomarca").hover(function() { 
    3. 
  
  3. if (html5audio !== undefined) {
    4. 
  
  4.  html5audio.then(function() { $
    5. 
  
  5.  $(".el-blogomarca,.el-alogomarca").toggle();
    6. 
  
  6.  }).catch(function(error) {
    7. 
  
  7.  // Automatic playback failed.
    8. 
  
  8.  // Show a UI element to let the user manually start playback.
    9. 
  
  9.  });
    10. 
  
  10. }
    11.

This is the error I was getting before:

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

And this is the error I'm getting now:

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