Search code examples
wordpressaudiowordpress-theminghtml5-audio

WordPress Audio Implementation (Theme Development)


I'm currently working on a theme aimed at studios and I thought i was about finished, but then i noticed that the audio isn't implemented correctly (which is kinda important for a music based theme).

When the file is added using the add media button in the back-end, then the file is added to the page/post. When you view the page, then the media player seems to load in the HTML5 audio tag and not the built in MediaElements, but if you inspect the page and change the screen size to 768px or less, then the MediaElements is loaded. I have looked and looked, but I can't seem to find out what it is that is causing it.


Solution

  • There appears to be a JS error in the console that only shows when you load the site at larger than 768px wide as you mentioned in your post. The error stems from your theme /assets/masonry-settings.js file. I think the JS error is blocking the JS from the media elements plugin from being able to hijack the native HTML5 audio tag as it is supposed to do.

    Uncaught TypeError: $container.masonry is not a function at runMasonry (masonry-settings.js?ver=1.0:29)

    Assuming you are the theme developer you should be able to troubleshoot the issue...