playlist: switching audio tracks

Thanks. The links are stuff you showed me back in January. You ended up helping me build a single player back then and I am attempting to modify that code, so I have attached what I have so far. It seems like is very close.

Unfortunately, I am not in a spot where I can work right now, so I will have to try this out in the morning.

I am attaching the file. The entire playlist is localized via wordpress, so that's where I'm getting the tracks from. If you have any suggestions, I always appreciate them. Thanks.

Attachments

doghaus.txt
Size : 6.95 KB Downloads : 1260 Download

dogknob

Re: playlist: switching audio tracks

9 years ago

Saw your example. Thanks, I will see what I can do with it in the morning. :)

dogknob

Re: playlist: switching audio tracks

9 years ago

Wow. Bummer. I have to rip this whole thing up that was working before in order to use a playlist.

Where does the "song" variable in your example come from? I thought I was starting to "get" this; now it's just black magic again.

dogknob

Re: Re: playlist: switching audio tracks

9 years ago

Your example also just repeats track 1 in IE9

jakecigar

Re: playlist: switching audio tracks

9 years ago

I don’t have a windows machine, so testing IE9 is a pain. Perhaps it is not getting the loadedmetadata event.

I get the songs in the loadedmetadata event. First thing I do is discard any <source> of a different type. Then I get the songs.

My debugging code might show if the loadedmetadata event is firing.

var events=["abort","canplay","canplaythrough","durationchange","emptied","ended",
"error","loadeddata","loadedmetadata","loadstart","pause","play","playing",
"progress","ratechange","readystatechange","seeked","seeking","stalled",
"suspend","timeupdate","volumechange","waiting"]
$('audio')
.on(events.join(' '),function(e){console.log(e.type)})

JΛ̊KE

dogknob

Re: playlist: switching audio tracks

9 years ago

What I'm trying to do is load track 1 (no autoplay), then when the user clicks play, the player will continue to play as your example does, cycling through the playlist until the user does something, which can be pause OR clicking a next/previous button OR clicking on any track in the list.

In the player you helped me with before, we set up a var "monitor," then a var "audio"

var audio = $( 'audio' ).on( monitor )[0]

All the controls worked fine doing it this way, but we were not dealing with a playlist then. Can I still call .load() later on on the audio variable when I want to load a new song?

jakecigar

Re: playlist: switching audio tracks

9 years ago

The code in this demo is an add-on to any other code.

You start the same way and you pause the same way.

ended:function(){

this.src=songs[(songs.indexOf(this.currentSrc)+1) % songs.length]

this.play()

}

can go inside monitor.

but loadedmetadata is only run one time

.one({
loadedmetadata:function(e){
$(this).children(':not([src$='+this.currentSrc.split('.').splice(-1)[0]+'])').remove()
songs=$.map($(this).children(),function(song){
return song.src
})
}
})

SO it all comes down to

var monitor={
ended:function(){
this.src=songs[(songs.indexOf(this.currentSrc)+1) % songs.length]
this.play()
},
// the rest of the events …
}
var audio = $('audio').one({
loadedmetadata:function(e){
$(this).children(':not([src$='+this.currentSrc.split('.').splice(-1)[0]+'])').remove()
songs=$.map($(this).children(),function(song){
return song.src
})
}
}).on(monitor)[0]

JΛ̊KE

jakecigar

Re: playlist: switching audio tracks

9 years ago

On the IE9 front, I updated http://home.jejaju.com/player/test/ to show the events.

Does it get the loadedmetadata event? I could use one of the other events.

JΛ̊KE

dogknob

Re: Re: playlist: switching audio tracks

9 years ago

Yes. It gets the loadedmetadata event in IE, but still repeats track 1

dogknob

Re: playlist: switching audio tracks

9 years ago

OK. Dunno how I'm gonna do all my nifty css, but whatever. If I can't figure it out I'll just deal with the new flowplayer branding BS. It was a nice pipe dream.

the .splice function is supposed to take two parameters, so I never would have figured that out and I have no friggin idea what that code actually does. Is it supposed to figure out if the browser can play the file? No clue, so I won't be able to switch to whatever track the user selects in the playlist, so why even have a playlist?

dogknob

Re: Re: playlist: switching audio tracks

9 years ago

And, yeah, that code just plays track 1 over and over in IE, so unless I have some idea of what it actually does, I can't fix it.

jakecigar

Re: playlist: switching audio tracks

9 years ago

this.currentSrc.split('.').splice(-1)[0]

foo.mp3 gets split into "foo","mp3"

splice(-1) is the last element (mp3) as an array

[0] gets it as a string.

It gets the extension of the clip that is being played. It could have been coded many different ways.

It would be interesting to see what the value of songs is.

JΛ̊KE

dogknob

Re: Re: playlist: switching audio tracks

9 years ago

undefined

jakecigar

Re: playlist: switching audio tracks

9 years ago

new debugging added. Run in F12 mode.

Does IE 9 even get

console.log($(this).children())

?

I also added

this.load(); // required for 'older' browsers

JΛ̊KE

dogknob

Re: playlist: switching audio tracks

9 years ago

http://home.jejaju.com/player/test/test_01.mp3
http://home.jejaju.com/player/test/test_02.mp3
http://home.jejaju.com/player/test/test_03.mp3
http://home.jejaju.com/player/test/test_04.mp3
http://home.jejaju.com/player/test/test_05.mp3
http://home.jejaju.com/player/test/test_06.mp3

dogknob

Re: playlist: switching audio tracks

9 years ago

I had thought that I had planned this out well; I localized the songs with all of the other information into a nice array I could access from the script.

The direction we are heading in removes my access to track information and just plays the audio files; even if we fix your example to work in IE, I'm still going to have a lot of problems doing the stuff the playlist is supposed to do.

I don't know why I can't have the script load track 1 by default, then when you press play, it plays like you are trying to do with this example... BUT... there are "next" and "previous" buttons to deal with and I need to be able to skip to ANY track in the playlist by clicking on it.

I was trying to define a function that would run on page load and load up track 1, but could then be called again to load track whatever.

jakecigar

Re: playlist: switching audio tracks

9 years ago

try it one more time. The debates are on now, so I’ll be back in a few hours.

JΛ̊KE

dogknob

Re: playlist: switching audio tracks

9 years ago

Yeah. Time to catch some zingers from the masturdebator.

Agreed.

The example still repeats track 1. I'll get some of what I have together while the debate is on.

dogknob

Re: playlist: switching audio tracks

9 years ago

I got the track auto advance (with the css changes) to work by NOT loading all of the <source> tags at once. Instead, I remove the whole <audio> element on the "ended" event, then recreate it with new <source> tags from the next track on the list, which then auto-plays.

It works for a while, but then breaks down. I moved from where I was working to a place where there is a really slow connection, so I can't really tell if my code sucks or the bad wi-fi is messing it up. Each time I reload, I get to a different place on the list, so I suspect the wi-fi.

http://dev.dogknob.com/

dogknob

Re: Re: playlist: switching audio tracks

9 years ago

Might there be a way to preload the whole playlist audio while track 1 is playing?

dogknob

Re: playlist: switching audio tracks

9 years ago

I am able to pull the correct information from my "tracks" array, but for some reason tracks.length returns "undefined" (???). Is there another way to count the number of tracks?

jakecigar

Re: playlist: switching audio tracks

9 years ago

Try http://home.jejaju.com/player/test/ with even more debugging and a different way to get the next song.

Preloading can be done, but only in individual <audio> tags or new Audio()s. That causes a problem with IE9 that I dealt with in another forum question. I had to suggest merging all the clips and skipping to the different areas of the clip. Luckily they were each a single note, so the large audio src worked out. I hope your problem was just really bad wifi.

JΛ̊KE

dogknob

Re: playlist: switching audio tracks

9 years ago

Yeah, these are going to be songs of various lengths in the "real" version, not just 10-second clips. I think it's the WiFi...

But why can't I count the number of tracks using .length or size()?

jakecigar

Re: playlist: switching audio tracks

9 years ago

num_tracks = tracks.each( function( i ) { return i } )

should be

num_tracks = tracks.length;

Did you try my code?

JΛ̊KE

dogknob

Re: playlist: switching audio tracks

9 years ago

in IE, your new code is still repeating track 1. I am not having that problem with my code, which there is A LOT of.

jakecigar

Re: playlist: switching audio tracks

9 years ago

This is why I am working with a simple version.

Did you see lines like these?

end :0 http://home.jejaju.com/player/test/test_01.mp3
start: 1 http://home.jejaju.com/player/test/test_02.mp3

JΛ̊KE

dogknob

Re: playlist: switching audio tracks

9 years ago

end :0 http://home.jejaju.com/player/test/test_01.mp3
start: 1 http://home.jejaju.com/player/test/test_01.mp3

I get an error when I try to count tracks using your method.

" tracks.each( function( i ) { return i } ) is not a function "

The tracks array works for loading tracks, but for some reason I can't count them.

jakecigar

Re: Re: playlist: switching audio tracks

9 years ago

num_tracks = tracks.length

JΛ̊KE

dogknob

Re: Re: playlist: switching audio tracks

9 years ago

I counted the tracks in PHP, then localized it.

That's weird, though.

dogknob

Re: playlist: switching audio tracks

9 years ago

I had asked about counting because tracks.length returned undefined. I solved it by counting in the PHP function I use to localize the playlist. Works fine

dogknob

Re: playlist: switching audio tracks

9 years ago

OK. It all works now. I can post the code if you want, or I can attach it -- whichever is more convenient.

1. playlist localized in php with all playlist/track information (and the num_tracks I couldn't get with tracks.length

2. loads track 1 on page load and changes appropraite css

3. on "play" event, it plays through the track, then replaces the <audio> element with a new one containing track 2... and so on.

4. on clicking the "next" or "previous" button, it replaces the <audio> element with a new one containing the appropriate track.

5. on clicking any of the list items, it replaces the <audio> element with a new one containing the appropriate track.

There's roughly 150 lines of (un-minimized, readable ) jQuery to accomplish this.

dogknob

Re: Re: playlist: switching audio tracks

9 years ago

I gotta run.

I guess it would be a greater service to the forum if I post the code, but I can't do it right now.

Happy that it works, though :) I'll get to posting it all in the morning.

dogknob

OK. Got it!

9 years ago

Yes, it's long. Yes, it involves 4 different wordpress custom post types with many-to-many database relationships... in other words, it's a clusterf**k :)

Yes, it all works now (except the "track info" link... because now I have to AJAX the internal links/content area so playback doesn't stop when you navigate around the site).

You can check out the player and the HTML source at http://dev.dogknob.com/

Here's the js:

jQuery( function( $ ){
/*** variables localized in wordpress php ***/
var ajaxUrl = dogHaus.ajaxUrl, siteUrl = dogHaus.siteUrl, playlist = dogHaus.playlist, tracks = playlist.tracks, num_tracks = playlist.num_tracks, avUrl = siteUrl + '/wp-content/av/',
/*** elements frequently used in this script ***/
audiodiv = $( 'body div#doghaus-player div.player div#audio' ),
dataul = $( 'body div#doghaus-player div.player ul.data' ),
controlsul = $( 'body div#doghaus-player div.player ul.controls' ),
listol = $( 'body div#doghaus-player div.playlist ol.pl-list' ),
data_infoli = dataul.children( 'li.data-info' ),
data_volul = data_infoli.children( 'ul.data-voltime' ),
tooltip = data_volul.children( 'li#vol' ).children( 'span.tooltip' ),
vol_slider = data_volul.children( 'li#vol' ).children( 'div#slider' ),
/*** ***/
audio, // the <audio> element for the current track. set by get_current_track()
track_on, // the current track. set by get_current_track()
time_format = function( seconds ) {
var m = Math.floor( seconds / 60 ),
s = Math.floor( seconds - ( m * 60 ) ) < 10 ? "0" + Math.floor( seconds - ( m * 60 ) ) : Math.floor( seconds - ( m * 60 ) )
return m + ":" + s
},
monitor = {
durationchange: function( e ) { data_volul.children( 'li#timeleft' ).text( time_format( audio.duration ) ) },
timeupdate: function( e ) {
var percentage = audio.currentTime / audio.duration * 100,
timeleft = audio.duration - audio.currentTime
data_volul.children( 'li#timer' ).text( time_format( audio.currentTime ) )
data_volul.children( 'li#timeleft' ).text( time_format( timeleft ) )
},
playing: function( e ) {},
ended: function( e ) { get_next_track() },
play: function( e ) { controlsul.children( 'li' ).children( 'a#play' ).addClass( 'pause' ).attr( 'title', 'click to pause' ) },
pause: function( e ) { controlsul.children( 'li' ).children( 'a#play' ).removeClass( 'pause' ).attr( 'title', 'click to play' ) }
},
// volume control slider
level = vol_slider.slider({
animate: true, value: 0.76, step: 0.01, min: 0, range: 'min', max: 1,
start: function( e, ui ) { tooltip.fadeIn( 'fast' ) },
slide: function( e, ui ) {
var vol = data_volul.children( 'li#vol' ).children( 'span.volume' ),
hdl = data_volul.children( 'li#vol' ).children( 'div#slider' ).children( 'a.ui-slider-handle' ),
val = parseInt( ui.value * 100 )
audio.volume = ui.value
tooltip.css( 'left', val ).text( val )
if( val <= 5 ) { vol.css( 'background-position', '0 -54px' ) }
else if( val <= 25 ) { vol.css( 'background-position', '0 -36px' ) }
else if( val <= 75 ) { vol.css( 'background-position', '0 -18px' ) }
else { vol.css( 'background-position', '0 0' ) }
if( val <= 3 ) { hdl.css( 'margin-left', '-3px' ) }
else if( val > 3 ) { hdl.css( 'margin-left', '-16px' ) }
},
stop: function( e, ui ) { tooltip.fadeOut( 'fast' ) }
})
/*** FUNCTIONS ***/
// rebuild the <audio> element for the current track
function get_current_track( track ) {
if( audiodiv.children( 'audio' ).length > 0 ) { audiodiv.children( 'audio' ).remove() }
audiodiv.prepend( '<audio><source src="' + avUrl + track.ogg + '" type="audio/ogg" /><source src="' + avUrl + track.mp3 + '" type="audio/mpeg" /></audio>' )
track_on = track.tracknum
get_current_info( track )
get_permalink( track )
audio = audiodiv.children( 'audio' ).on( monitor )[0]
}
// display info for currently playing track
function get_current_info( track ) {
if( track.image != '' ) { dataul.children( 'li.data-img' ).css( 'background-image', 'url(' + track.image + ')' ) }
else { dataul.children( 'li.data-img' ).css( 'background-image', 'url( "' + siteUrl + '/wp-content/themes/doghaus/img/audio_default.png" )' ) }
dataul.children( 'li.data-info' ).children( 'div.data-title' ).html( '' + track.title + 'by ' + track.artist + '' )
get_playlist_li_status( track.tracknum )
}
// set playlist css class for the currently playing track
function get_playlist_li_status( tracknum ) {
listol.children( 'li' ).removeClass( 'track-on' )
listol.children( 'li#pl-' + tracknum ).addClass( 'track-on' )
}
// get permalink for current track and assign as href to the track info button
function get_permalink( track ) { controlsul.children( 'li' ).children( 'a#info' ).attr( 'href', track.url ) }
// set images for each track in playlist
function get_playlist_defaults() {
listol.children( 'li.track' ).each( function() {
var id = $( this ).attr( 'id' ).substr( 3, 2 )
if( playlist.tracks[ id ].image != '' ) { $( this ).children( 'div.pl-list-img' ).css( 'background-image', 'url(' + playlist.tracks[ id ].image + ')' ) }
})
}
// previous/next buttons share class 'skip' and have an id of either 'prev' or 'next'
function get_prev_next( skip ) {
switch( skip ) {
case 'prev':
get_prev_track()
break;
case 'next':
get_next_track()
break;
}
}
// get next track in playlist or first track if current track is last
function get_next_track() {
var next = ( ( track_on + 1 ) > num_tracks ) ? 1 : track_on + 1;
get_current_track( tracks[ next ] )
audio.play()
}
// get previous track in playlist or last track if current track is 1
function get_prev_track() {
var prev = ( ( track_on - 1 == 0 ) ) ? num_tracks : track_on - 1;
get_current_track( tracks[ prev ] )
audio.play()
}
/*** EVENTS ***/
// remove defaults from player controls
$( 'body' ).on( 'click', 'div#doghaus-player div.player ul.controls li a', function( e ) { e.preventDefault(); e.stopPropagation() } )
// toggle play-pause
controlsul.children( 'li' ).children( 'a#play' ).click( function() { ( audio.ended || audio.paused ) ? audio.play() : audio.pause() })
// select track from playlist
listol.children( 'li.track' ).click( function() {
var id = $( this ).attr( 'id' ).substr( 3, 2 )
get_current_track( tracks[ id ] )
audio.play()
})
// select prev-next track
controlsul.children( 'li' ).children( 'a.skip' ).click( function() {
var skip = $( this ).attr( 'id' )
get_prev_next( skip )
}
// show-hide playlist
controlsul.children( 'li' ).children( 'a#list' ).toggle(
function() {
$( this ).addClass( 'list-on' ).attr( 'title', 'hide playlist' )
$( this ).parents( '#doghaus-player' ).children( '.playlist' ).show()
},
function() {
$( this ).removeClass( 'list-on' ).attr( 'title', 'show playlist' )
$( this ).parents( '#doghaus-player' ).children( '.playlist' ).hide()
}
)
// init
get_current_track( tracks[ 1 ] );
get_playlist_defaults();
tooltip.hide();
})

Thanks again so very much for all of your help, Jake :)

Response title

Attachments

Replies(37)

Attachments

Statistics

Tags

Actions