Streaming live at 10am (PST)

Custom Audio Player with "Mediaelement.js" only working in first tab


I made a custom audio player with “Mediaelement.js” a solution like JPlayer and gives you the opportunity to style your player. with this solution you always can fallback on the HTML5 audio element which is supported but by many modern browsers. So far so good, but the strange thing is … The customised player is only working in the first tab of a webflow tab section. In the other tab’s 2,3,4 etc only and luckely the native audio player is visible. My assumption is the use of relative links to little images (small sprites with play en pause in one image) in the CSS. I think webflow doesn’t like url’s to images in the css files.

Can somebody give me an idea how to solve this while it would be nice to keep on using the customised player.

Update: I just discovered using the same custom audio player element in the same tab is also not working and falling back to native HTML5 audio player. So it’s related to to using the element twice while using a different audio file.

Update 2: Ok solved. It seems that you can use $("audio").mediaelementplayer({ // API options

instead of $('#audio-player').mediaelementplayer({ // API options

see Fiddle fiddle source