Music playing continuously with name

Question

I was actually able to make music play continuously throughout the pages without reloading, using frames (I know music playing continuously is not a good idea but the client really requested it, so I had no choice). Here is what I used for the frame with the music playing:

<body>
    <div id="player">
    <audio id="audio" controls="controls" autoplay="autoplay" loop="loop" style="width:150px;">
      <source src="martnalia05namoracomigo.ogg" type="audio/ogg" />
      <source src="martnalia05namoracomigo.mp3" type="audio/mp3" />
      <embed src="martnalia05namoracomigo.mp3" hidden="true" loop="TRUE" autostart="TRUE"></embed>
    </audio>
    </div>
</body>

I inserted this music just to test, and I would like to know if it is possible to make a play list and if it is possible to inform the music which is currently playing with a link in it and a button to skip a music, for example:

[player]
| button previous  | button to play/pause | button next
| name of the music (link to the page of the Album) | 
[end of player]

Any suggestions?

You don't need to use frames - you can have your content container fetch the data asynchronously with AJAX and populate it that way. BackboneJS and Spine are both great solutions for that type of web app. — AlienWebguy, Sep 20 '12 at 17:41
I'm not sure I'll be able to use it, because I'm actually using a pre-made base for my site, I'm using this: jumpseller.com and my web site is this: http://biscoitofino.jumpseller.com/ I don't know if I can actually edit the navigation in this sistem since I have limited acess for the codes. My idea was to use the music player in a Frame above and the web true content in the Frame below. — Leo Ramos, Sep 20 '12 at 17:52
I personally would consider using a single page app framework to achieve this. — Kieran Devlin, Jan 03 '19 at 16:02

score 1 · Answer 1 · answered Oct 02 '12 at 14:16

You are wanting to make a small media player perhaps, if thats the case there are plenty of ready made script available to help you accomplish this. (Google is your friend).

If you do decide to go about it on your own here are my thoughts, they may help you in the right direction.

var data = [{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"},
            {audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"}];

Some sort of data structure to store the details of your tracks.

var audio = document.getElementById("audio");
audio.addEventListener('ended', playNext);

Finally some sort of function to handle the switching of tracks

var currentTrack = 0;
function playNext(options){
    currentTrack++;
    if (currentTrack > data.length){
        currentTrack = 0;
    }
    var audiosrc = document.getElementById('embed_element_id') // or some other selector method
    audiosrc.src = data[currentTrack].audiourl;
    audiosrc.play();
}

Im not totally sure on the HTML5 audio specification but i would assume its along these lines.

Hope this helps

score 0 · Answer 2 · edited Sep 21 '12 at 14:52

0

You're probably going to have to use a media player plugin. Try LeanBack Player:

http://leanbackplayer.com/ + http://leanbackplayer.com/player_extensions.html (XSPF Audio Playlist extension)

It's HTML5/CSS/JS with a Flash fallback option so you should be able to style it to suit your needs easily enough.

edited Sep 21 '12 at 14:52

yoozer8

7,361
7
58
93

answered Sep 21 '12 at 14:50

gfyans

1,236
1
16
21

Hello and thanks for your answer Jim, so tell me, do you think that thre's a better option than using frames in my case (considering that I can't use AJAX with the system I have) to have the music playing continuously?? – Leo Ramos Sep 21 '12 at 19:00
Given that you can't customise the page enough to enough add some JavaScript, I would say you're only option is to stick with the frames. – gfyans Sep 22 '12 at 16:50
If you weren't so restricted you could go down the single-page app route, http://en.wikipedia.org/wiki/Single-page_application, so the page never refreshes, you request only the new content when a user clicks a link in your navigation. Your media player stays on all the time. Have a dig around hypem.com's source, I'm not sure how they've got their URLs to change without using a # (single page apps aren't my thing), but it works great. Out of interest, why can't you use AJAX? If you can't add JS to your site you won't be able to use LeanBack. – gfyans Sep 22 '12 at 17:03
Did a quick bit of Googling and it looks like Hypem are using HTML5 pushState technology to do the URLs - http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate – gfyans Sep 22 '12 at 17:09

Music playing continuously with name

2 Answers2