javascript - jQuery playlist function error: function undefined -


i'm trying create .mp3 player loop through audio tracks, keep getting error on firebug main function use undefined, although define it. here code:

$(document).ready(function() { var counter=1; var nextsong = function(){     if (counter <= 3) {         $('audio').src="audio/audio"+counter+".ogg";         $this.load();         $this.play();         counter++;     }     else {         counter=0;         $('audio').src="audio/audio"+counter+".ogg";         $this.load();         $this.play();     };   }; });

and markup simply: 

<!doctype html>     <head>         <title>dokimastiko audio player</title>         <script type="text/javascript" src="js/jquery.min.js"></script>         <script type="text/javascript" src="js/dokimastiko.js"></script>     </head>     <body>         <audio src="audio/audio1.ogg" controls autoplay onended="nextsong();"></audio>     </body>

any thoughts?

i debated on whether give full lesson on why code pretty bad... , since have little on plate @ work right i'll so... :p

first of $this have there undefined, calling method on going undefined well.

you copied code somewhere, fine, need able copy smartly instead of blindly.

.... changed code midway of post, update: $(this) same $(document) since context of this within $(document).ready(function() {})

so, nope, still wrong.

so first modification, should be:

$('audio').load(); $('audio').play();

but still wrong. because $('audio') jquery object, , not contain dom-level methods load , play directly, need dom object:

$('audio').get(0).load(); $('audio').get(0).play();

now wondering why .get(0), it's because $('audio') collection of matches 'audio', get(0) return first 1 only.

this prone breakage if decide add more audio tags page, should give audio tag unique identifier:

<audio src="audio/audio1.ogg" controls autoplay onended="nextsong();" id="audio1"></audio>

and use id in jquery selector:

$('#audio1').get(0).load(); $('#audio1').get(0).play();

this still abit verbose, given need this, simplest way.

update:

as per suggested @jandvorak here example uses jquery events well

fiddle: http://jsfiddle.net/mpbp5/1/

jquery(document).ready( function($) {     $('#audio1').bind('ended', function(e) {         alert('end');     }); });

i can keep going on "lesson", should try not define music urls abstractly, if leaves page on , hits file which, counter #, doesn't exist?

i declare array of files wish load:

var library = [     'http://www.archive.org/download/bolero_69/bolero.mp3',     'http://www.archive.org/download/moonlightsonata_755/beethoven-moonlightsonata.mp3',     'http://www.archive.org/download/canonind_261/canonind.mp3',     'http://www.archive.org/download/patrikbkarlchambersymph/patrikbkarlchambersymph_vbr_mp3.zip' ]; var currentindex = 0;

then loop through list:

jquery(document).ready( function($) {     $('#audio1').bind('ended', function(e) {         currentindex++;         if (currentindex > library.length-1) {             currentindex = 0;         }         this.src = library[currentindex];         $('#url').html(library[currentindex]);     });      $('#audio1').attr('src', library[currentindex]);         $('#url').html(library[currentindex]); });

http://jsfiddle.net/mpbp5/3/

if don't want fixed list of audio files play (which should), can generate array @ least rules.


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more