Continuous Music Player for WordPress


#1

Hello, i need a music player for wordpress that can play continuously a music all over the website pages.

I found this one:
Sticky HTML5 Music Player WordPress Plugin

But the problem is that there is always a small interruption on the music when you go to an other page (inside of the same website).

There is the Pop-Up window possibility, but I 'm trying to avoit it because pop-ups are annoying and most of the time they are blocked.

Do you guys know an Wordpress Plugin that can play a music without interruptions?

Thanks


#2

Any help?


#3

Hello,

I guess this is a funny item request. To me: I’m (currently, but planned) not a wordpress plugins developer, but I can tell you some reasons why this doesn’t work and how it could work.

Why doesn’t it work with wordpress?
My opinion is, that wordpress initializes the plugins in PHP. So, if I submit a plugin and load the required javascript, it can’t work anymore because the main part of the html-tree is already submitted to the webbrowser.

How it could work and the algorithm behind a realtime-webplayer
Well, to get it working it’s required to import a frame into your html-tree. We have to display every single html tag of wordpress and all other activated plugins inside of this frame. Outside of this frame, there will be a javascript/jQuery code which loads the player and the page inside of the frame.

For example you’d click on a tab like “profile”. It would redirect you maybe to profile.php?id=3929 or something like this - maybe your own profile? So, if we’d import a player and play music with it, the player would get reloaded and auto restarted.

But we could just save the step where we stopped the player when switching the page?
True, but this would make a small lag depending on the loading time of your page and the internet connection of the client. So, it doesn’t matter, it would for 100% lag for even 1-2 seconds. So this idea isn’t really good.

Didn’t we import the frame and the player in our html document? Yeah, we did!
So if we switch INSIDE OF THE FRAME another page, it won’t attack our main page. Only the frame will get reloaded/navigated to another page!

So we can easily play music trough our music player on the main-page and switch pages on our frame-page (wordpress).

I hope I could help you with my broken english at least a little bit but… this would be (from my opinion) the only way to create a web-based music player.

So far I will have a look to create a wordpress plugin because this part does really interest me and looks like a small fight for me. Challenge accepted!

Cheers :slight_smile:

Edit 1:
There are for sure other ways to do it. I had a look at soundcloud and figured out they don’t use iframe’s. So i thought how this could be possible. The reason for this is (maybe) simple: They’re using AJAX technologies to load their content of pages which you are navigation trough. Per example you’re clicking on “explore”. Asynchronous it will load the HTML for the page “explore” and set it to the current HTML body. So, the music player won’t get attacked by it trough it’s asynchronous handling.

If you’d do it without an iframe or asynchronous technology, it would be synchronous and refreshed in front of your eyes - ugly for sure!


#4

Hello,

I thought again about a way to do it with an wordpress plugin. All you require is jQuery, CSS and HTML!

Here’s the way how you could create the plugin:

  • We should make the html invisible! (.css("display", "none"); .hide();)
  • Copy the whole HTML code of the page how it should get loaded
  • Load a standard HTML code asynchronous from a .html file or something like after this explanation (it should contain an iFrame where we'll display the whole code of the wordpress page and too a normal html structure)
  • Insert the copied HTML code of part 2.) into the iFrame
  • Insert the mediaplayer-HTML into the normal HTML-structure we've loaded asynchronous
  • Insert some CSS code to make the iFrame 100%/100% sized and also an absolute position set for the media player. (Top, bottom, right, left?.. your thing)
  • Make the body visible (with or w/o any effect, it's your chose)
  • Have fun! We're done!