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>

EDIT: Pause and Play button now works – Nov 12 '16 at 20:00 — , Nov 12 '16 at 20:00

score 0 · Accepted Answer · answered Nov 15 '16 at 07:37

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

1 Answers1