Android HTML5 Audio duration and loadProgress in audio.js


Hits: 5609  

audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere.

HTML5 Audio Js Duration Buffered

AudioJS uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. AudioJS provides a consistent html player GUI to all browsers which can be styled used standard CSS.

But I faced a issue in audio.js html5 player, the audio preload, duration and buffer was not working 🙁

Hope this will save your time .. please find modified javascript

loadProgress: function() {
      if (this.element.buffered != null && this.element.buffered.length) {
        // Ensure `loadStarted()` is only called once.
        if (!this.loadStartedCalled) {
          this.loadStartedCalled = this.loadStarted();
        }
        var durationLoaded = this.element.buffered.end(this.element.buffered.length - 1);
        this.loadedPercent = durationLoaded / this.duration;

        this.settings.loadProgress.apply(this, [this.loadedPercent]);
      }
      else
      {
      // audio duration in Android
      if (!this.loadStartedCalled) {
          this.loadStartedCalled = this.loadStarted();
      }

      var durationLoaded = this.element.buffered.end(this.element.buffered.length - 1);
        this.loadedPercent = durationLoaded / this.duration;

        this.settings.loadProgress.apply(this, [this.loadedPercent]);

      }

    },

Modified file

audio js duration in android

On Android ICS 4 you might load and play audio with delay

setTimeout(function() {
            audio.load(src);
            audio.currentTime = 0;
            
            setTimeout(function() {
                audio.play();
            }, 500);
        }, 500);

Open ColorBox from iFrame to Parent Window


Hits: 7605  

function iframecode(url, w, h) {
window.parent.$.colorbox({href:url, iframe: true, scrolling: false, width: w, height: h});

}

var headID = window.parent.document.getElementsByTagName("head")[0];         
var newScript = window.parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
headID.appendChild(newScript);

var headID = window.parent.document.getElementsByTagName("head")[0];         
var cssNode = window.parent.document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'http://demo.svnlabs.com/colorbox/example3/colorbox.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);

var headID = window.parent.document.getElementsByTagName("head")[0];         
var newScript = window.parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://demo.svnlabs.com/colorbox/colorbox/jquery.colorbox.js';
headID.appendChild(newScript);

Uses:
onClick=”iframecode(‘http://www.svnlabs.com/’, ‘80%’, ‘80%’);”