Force Audio library in JS to load

Question

I want to get Audio Length without having to play then pause then play again for getting the audio length/duration?

The function called will be: this.createRangeElement

But for some reason it outputs "NaN", so how would I force the Audio to render?

 function get_uai(){ return new uai(); } function uai(){ var AE = new Audio(); var played = false; this.src = ""; this.set_src = function(){ AE.src = this.src; AE.load(); } this.play = function(){ if(played == true){ AE.play(); }else{ AE.src = this.src; played = true; AE.play(); } }; this.pause = function(){ AE.pause(); } this.stop = function(){ window.aui = undefined; } this.createRangeElement = function(){ var min = "0"; AE.load(); var max = AE.duration; console.log(max); } } // Getting the UAI API var aud = get_uai(); // Setting the source aud.src = "http://crossorigin.me/https://s3-us-west-2.amazonaws.com/s.cdpn.io/1715/the_xx_-_intro.mp3"; aud.set_src(); // Creating a range element aud.createRangeElement(); // Playing the sound //aud.play()

 <html> <head> <title>Music Player</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body> <em class="fa fa-pause" onclick="aud.pause();"></em> <em class="fa fa-play" onclick="aud.play();"></em> </body> </html>

Answer 1

You can use oncanplaythrough event to detect if audio duration data is available.

 function get_uai() { return new uai(); } function uai() { var AE = new Audio(); var played = false; this.src = ""; this.set_src = function() { AE.src = this.src; AE.load(); } this.play = function() { if (played == true) { AE.play(); } else { AE.src = this.src; played = true; AE.play(); } }; this.pause = function() { AE.pause(); } this.stop = function() { window.aui = undefined; } this.createRangeElement = function() { var min = "0"; AE.load(); AE.oncanplaythrough = function() { var max = AE.duration; console.log(max); } } } var aud = get_uai(); aud.src = "http://crossorigin.me/https://s3-us-west-2.amazonaws.com/s.cdpn.io/1715/the_xx_-_intro.mp3"; aud.set_src(); aud.createRangeElement();

 <html> <head> <title>Music Player</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body> <em class="fa fa-pause" onclick="aud.pause();"></em> <em class="fa fa-play" onclick="aud.play();"></em> </body> </html>

Force Audio library in JS to load

Question

1 answers

solution1
0 ACCPTED 2016-11-15 07:37:37

Force Audio library in JS to load

Question

1 answers

solution1 0 ACCPTED 2016-11-15 07:37:37

solution1
0 ACCPTED 2016-11-15 07:37:37