Sticky Continuous audio player

Hey,

I’m looking for a Sticky Continuous Audio Player that runs smoothly as the user browses through the website pages. Also to be able to post the audio player in post and when as a user browses and play content the player that is sticky works together.

Anyone know of a plugin or recommendations?

Hey, I could make on unique for you. If you’re interested submit an email over my profile and tell me your wishes.

Which type of media do you want to support:

  • MP3
  • MP4
  • Spotify
  • YouTube
  • SoundCloud

Just tell me and let me know. Maybe I can develope a small project and submit it based on your wishes to codecanyon. Let me know! :blush:

Hey thanks for your reply. I found a few that are almost to where I am satisfied. The issue is, they are not true continuous playback. The goal is for the user to go a post, play the podcast, be able to move around the site pages, without the player stopping. If the user finds another post with a podcast than when playing that podcast the player will change from the footer.

The issue is the players reload and play from on with the audio stopping for a second. I been told my website needs to be Ajax.

However, if you have another way I am open to this. I’d like it to be mp3 and SoundCloud.

Let me know if if the above can occur, it is important.

Thanks again.

Oh, okay. Easy.

You really require either AJAX or iFrames. The main use of the two features are:

Method :one: - How does it work with iFrame?
The player itself will get placed on an empty index.html file. With some CSS rules, you can set a iFrame-HTML tag into the page and make it 100% width & height, without borders, outlines… anything. It will be a page-in-your-page. The z-index will be for example 1. Now you have to place the HTML audio player widget into this, positionated absolutely or fixed, however you wish it and set the z-index to 2. So, the page itself will be on background and the audio player in foreground. Now you can navigate in background on the page and do whatever actions you want, it will only perform the loadings/actions in the iFrame and ignore the audio player due it’s on the main screen and un-accessible for the iFrame.

Method :two: - How does it work with AJAX?
AJAX is the smartest way for this. But also the most complicated way too. All you have to do is grab the LINK-Click events. Somehow like this

$("body").on("click", "a", function(eventCallback) {
    eventCallback.preventDefault();
    eventCallback.stopPropagation();

    var requiredHref = $(this).attr("href");

    // optionally insert here a beautiful page-loading progressbar on top of the page?

    $.ajax({
        url: requiredHref,
        type: POST,
        dataType: "HTML",
        success: function(fetchedContent) {
            $("body").html(requiredContent);
        }
    });
});

Summary: The function will fetch each click on a link, that would automatically perform a redirect to another page. But we’re holding back the event from firing itself automatically, we’re grabbing the HREF that’s set to the link and loading ourselves the content and place it into the page. This is exactly the same what a click on an A-Tag with HREF does. But we’re make it simulated. So, asynchronously it’s loading & setting the content and the player can go on.

Give me some time, I will create a small player for you for free. :star2: Using SoundCloud & MP3.

Hey, we got time! Certainly looking forward to it!

Talk soon

Hey, have you meant something like this?

I’m creating a unique design right now for this one. If you’d be happy with that, I’ll continue now working on it. :blush:

UPDATE 00:49am

I must go to sleep because I have to drive my girlfriend in 5 hours to her school 30 kilometres away. Damn. I’d really love to complete it now for you, but so far the design is completed. Tomorrow after that (in about 6-7 hours) I’ll add the entire logic and functionality and responsive content.

I hope you like the work. If you want something more/removed, just tell it right now. So I can asap implement it for you!

Hope I can help :blush:
Gonna drink a :beer: now! Cheers :beers: - and good night :sleeping: :sleeping_bed:

Cheers, eliteCode

LIVELINK: eliteCode.biz - Freework audioplayer project for JasperJones88

image

So far, it’s almost finished. Playing music and pausing it is done. Moving back/-forward will also be done asap. Do you like it so far?

Let me know what you require else.

Let’s hear something from you.

Hey,

Thanks for your reply, and I hope the beer was tasty. Our timezone are obviously very different :wink:

Also no rush, you are certainly putting this together quickly, however, please also enjoy your weekend. We are patient people.

As for the player, I can’t believe you put something like this together so quickly. Very impressive. It is looking good.

Talk soon.

Hey, don’t worry mate, coding is my life. :blush: I’m a programmer since I’m 12 years old, so it’s really a passion. Sometimes at evening/night when my GF sleeps I’ve got nothing else to do, so I start programming and help each other on codecanyon! :smiley:

Just tell me your wishes, what you’re excepting on functionality, so I can continue creating it perfectly based on your requirements. :slight_smile:

The beer was tasty, real good bavarian beer hehe. :blush: :beer:

Waiting for your requirements :slight_smile:

Hey,

Thanks again, you are are doing amazing. Just a few things to customize to our needs:

the color instead of blue would be #ea1d22 (red)

Since we have a few podcasts the wording would be different instead of artist and song.

The inputs would be

Podcast: (user can input in backend)
Episode: : (user can input in backend)
Description: user can input in backend)

Thanks again

Alright sir. Let me change this for you in a few hours. Driving now to diner :taco: :slight_smile:

Hey!

No problem, enjoy dinner!

Talk soon

Hey,

a few questions:

  • Podcasts are MP3 files?
  • Podcasts are too uploaded on SoundCloud?
  • Should there be an option to add small HTML widgets for the player on the page? For example: A visitor reads a blog entry where you’ve appended a small widget like “Listen it now in our podcast” with a play button, so when he clicks on play, the player itself will start playing this podcast?

Making your changes now and starting to implement SoundCloud API :slight_smile:

UPDATE 11:51pm

image

Close enough? :blush:

UPDATE 00:22am

Completed playing podcasts (MP3 at all) from the playlist and minimizing the window works now too. Let’s see what’s possible to create with the SoundCloud API now. :blush:

UPDATE 00:25am

I’m sorry for that, but SoundCloud doesn’t accept any registrations so far because of highly use of their API’s. (Too much consumed traffic I guess).

Well, you can contact me at dominik.ganic@elitecode.biz furthermore regarding your player. So far, you can add your own .MP3 files to any given folder and add links to the podcast.

You can download it for free (and anyone else who wants to use it, completely free without any given licences) under this link:
Download elitePlayer.zip for free - eliteCode.biz
RAW source: https://pastebin.com/mfpB6x30

It contains only one file: index.html

A small documentation may help you out, maybe you’ll understand the players basics with this small example:

  • Notice, that index.html should be the MAIN FILE/INDEX of your homepage. If you’ve got an index.php file, I’d recommend you to rewrite the URL with htaccess to set the index.html as start-up file of your homepage.
  • You should change the iFrame-SRC to your index.php which will display your default homepage in background on the iFrame (Visitors won’t see any difference)
  • Without the iFrame, you can’t make the player continuous playable. Maybe, I can create an asynchronous version one day of this player. Let’s see, what time brings. :blush:

How to change the title of the player?
In the given SCRIPT tag, you’ll find the following line:

// Change your title here
elitePlayer.playerTitle = "elitePlayer - Podcast MP3 player";

Change Podcast title comes here to any title of the player you’d like to use. :blush:

How to add songs to the playlist?
In the given SCRIPT tag, you’ll find the following line:

// Add songs to the playlist here
elitePlayer.audioAdd("Dota", "Episode 1", "Any description may come here", "http://elitecode.biz/_freework/_eliteplayer/_music/basshunter_dota.mp3");

:one: Parameter - Title of the podcast
Change Dota to the title of your podcast.

:two: Parameter - Episode
Change Episode 1 to your given episode

:three: Parameter - Link to the MP3 source
Change http://elitecode.biz/_freework/_eliteplayer/_music/basshunter_dota.mp3 to your given MP3 file source.

How to change the iFrame source
Look up for the < iframe > tag in the code and change the src attribute value to your main file of your homepage. (Like index.php)

<iframe src="../../index.php"></iframe>

Thats it. Have fun. :beers:

I hope you like it and I could make you a smile with that. For any other changements or wishes just let me know, I’ll find for sure time any day to upgrade it :slight_smile:

Hey!

I did a quick read and I will certainly go through it tomorrow and set it up. I really appreciate it and certainly do have a smile on my face. Looking forward to setting up.

I’ll be in touch.

Hello Elitecode,

I’m looking for the same type of audio player for my website, with some added features both in display and functionality. Do let me know if we can work on this. contact me on [e-mail removed], or let me know how we take the forward.

The player you’re doing here looks good…!

Thanks,
Kaushal.