Panel Menu doesn't let HTML5 Audio play

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Post Reply
veebee
 
 
Posts: 3
Joined: Sat May 06, 2017 2:26 pm

Panel Menu doesn't let HTML5 Audio play

Post by veebee » Fri Mar 23, 2018 8:02 am

Dear WWB community,

Here is a simple html page, with only 2 elements - one Panel Menu, with default values, and one HTML5 Audio. Audio works fine without Panel Menu. But when Panel Menu is added to the page, audio doesn't get played, though Panel Menu works fine. Please not, the situation is specific to the audio with Loop 'on' and Show Control 'off'. When Show Control is checked to visible, HTML5 Audio gets played with Panel Menu.

Code: Select all

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<link href="KR_Final_14.css" rel="stylesheet">
<link href="panelmenu.css" rel="stylesheet">
<script src="jquery-3.3.1.min.js"></script>
<script src="wb.panel.min.js"></script>
<script>   
   $(document).ready(function()
   {
      $("#panelmenuPanelMenu1").panel({animate: true, animationDuration: 200, animationEasing: 'linear', dismissible: true, display: 'push', position: 'left', toggle: true});
   });
</script>
</head>
<body>
   <div id="wb_panelmenuMediaPlayer1">
      <audio src="musika.mp3" id="panelmenuMediaPlayer1" autoplay="autoplay" loop="loop" preload="preload">
      </audio>
   </div>
   <nav id="wb_panelmenuPanelMenu1">
      <a href="#panelmenuPanelMenu1_markup" id="panelmenuPanelMenu1">Panel Menu</a>
      <div id="panelmenuPanelMenu1_markup">
         <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About Me</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Links</a></li>
         </ul>
      </div>
   </nav>
</body>
</html>
Any help will be appreciated. Thank you in advance.

User avatar
Pablo
 
Posts: 14131
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Panel Menu doesn't let HTML5 Audio play

Post by Pablo » Fri Mar 23, 2018 10:06 am

It seems to work correct for me and I do not see any errors in the code.
Did you publish all files?

veebee
 
 
Posts: 3
Joined: Sat May 06, 2017 2:26 pm

Re: Panel Menu doesn't let HTML5 Audio play

Post by veebee » Sat Mar 24, 2018 12:19 am

Thank you for the prompt reply.

Yes, I published all the files. But this is not working in preview either. I created a fresh file and tried again. It didn't work in preview or even after publishing all the files.

As soon as I insert Panel Menu, the HTML5 Audio stops playing on its own. May be, its loading as mute, and since show control is not selected it couldn't be played. Because when Show Control is selected then audio loads as mute and I've to play audio from its control.

I want to preload autoplay hide and loop the audio.

Do I need to change jQuery version in Page Properties, or does Panel Menu work for all versions? Panel Menu works in html also or page has to be php?

Thank you in advance.

P.S. : The audio is working fine with other menu options, only Panel Menu is loading it as mute.

User avatar
Pablo
 
Posts: 14131
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Panel Menu doesn't let HTML5 Audio play

Post by Pablo » Sat Mar 24, 2018 7:20 am

What is the URL of the page so I can see what you have done?

User avatar
BaconFries
 
 
Posts: 4151
Joined: Thu Aug 16, 2007 7:32 pm

Re: Panel Menu doesn't let HTML5 Audio play

Post by BaconFries » Sat Mar 24, 2018 5:08 pm

Pablo I have just done a quick test on this.
1) Add media player to page (HTML 5 Audio) set as Type: HTML Audio5->Add the required files Filenames: mp3, ogg. Behaviour: Autoplay, Show control, Loop, Preloaded media file all checked.
2) Add Panel Menu to page set as Options->Panel->Display: Push-> Dismisseible checked leave all other as default just for testing purpose. Now Preview.. tested in Edge, Chrome, Firefox, Safari and Opera.
Edge fails to Autoplay ❌
Chrome fails to Autoplay❌
Opera fails to Autoplay❌
Safari fails to Autoplay❌
Firefox Autoplays✔
Now repeat but in the Panel Menu select 'Overlay' instead of 'Push' and test again this time the Audio starts automatically in all Browsers. Hope this helps.

User avatar
Pablo
 
Posts: 14131
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Panel Menu doesn't let HTML5 Audio play

Post by Pablo » Sat Mar 24, 2018 6:04 pm

Can you try this for me?
- enable 'center in browser' in the page properties.
Does it work now?

Why?
The Panel menu needs a container to be able to push the content of the screen.
If the 'center in browser' is not enabled then the menu will create its own container. This affects the page HTML and therefor the browser may stop the audio.

User avatar
BaconFries
 
 
Posts: 4151
Joined: Thu Aug 16, 2007 7:32 pm

Re: Panel Menu doesn't let HTML5 Audio play

Post by BaconFries » Sat Mar 24, 2018 6:37 pm

That was it Pablo, hopefully this will resolve the OP issue, a second pair of eyes always helps.

veebee
 
 
Posts: 3
Joined: Sat May 06, 2017 2:26 pm

Re: Panel Menu doesn't let HTML5 Audio play

Post by veebee » Wed Mar 28, 2018 11:25 am

That worked. :)

Dear Pablo and BF, thanks for making my life easy.

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests