Adobe Flash ExternalInterface issues with Internet Explorer


Hits: 4503  

I was working for HTML5 Audio.js Player… I really like calling ExternalInterface when using SWFObject on Windows XP IE 8. You can’t use an actionscript callback for a certain set of keywords (“play”, “stop”, “tags”, “item”, “length” etc.) will break in IE and cause a javascript error.

Object doesn’t support this property or method

public function audiojs():void {
Security.allowDomain(“*”);

this.playerInstance = root.loaderInfo.parameters.playerInstance+’.’;

ExternalInterface.addCallback(‘init’, init);
ExternalInterface.addCallback(‘load’, load);
ExternalInterface.addCallback(‘playPause’, playPause);
ExternalInterface.addCallback(‘pplay‘, play);
ExternalInterface.addCallback(‘ppause‘, pause);
ExternalInterface.addCallback(‘skipTo’, skipTo);
ExternalInterface.addCallback(‘setVolume’, setVolume);

ExternalInterface.call(this.playerInstance+’loadStarted’);
}

Audio.js
IE doesn’t allow a method named play() to be exposed through ExternalInterface, so lets go with pplay().
Use ppause() for consistency with pplay(), even though it isn’t really required.

Avoid common names like play & pause when using ExternalInterface Call. 😉

HTML5 MP3 Lyrics Player


Hits: 6125  

HTML5 Lyrics Karaoke Player Plugin enable wordpress users to sing and play song text lyrics.

Free Features

  • Supports MP3 formats
  • Supports Text Song Lyrics
  • Social Links Facebook / Twitter
  • Works in IE, Safari, Firefox, Chrome, Opera
  • Player have shortcode for post/page [html5lyrics id=ID] i.e. [html5lyrics id=1]

Paid Features

  • Supports MP3 formats
  • Supports Text Song Lyrics
  • Support Images on song’s cue points
  • Color / Size Customization
  • Supports Unicode
  • Social Link Customization
  • Multiple player on same page / post
  • Works in IE, Safari, Firefox, Chrome, Opera, mobile devices including Android/iOS
  • Supports Wowza / Amazon Cloud Front / S3 HTTP Streaming
  • Facebook page customization with player
  • Player have shortcode for post/page [html5lyrics id=ID … ] i.e. [html5lyrics id=1 … ]
  • Best support on email / skype

Note: It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers.
It provides a consistent html player UI to all browsers which can be styled used standard css.

Browser & format support

With Flash as a fallback, it should work pretty much anywhere.

It has been verified to work across:

– Mobile Safari (iOS 3+)
– Android (2.2+, w/Flash), Android (4.0+)
– Safari (4+)
– Chrome (7+)
– Firefox (3+, w/ Flash)
– Opera (10+, w/ Flash)
– IE (6, 7, 8, w/ Flash)

Demo

Get fully customized HTML5 Lyrics Karaoke Player for Website Buy Now or Contact Us

Standalone

  

Screenshots

html5-lyrics-karaoke-player screenshot 2

Create HTML5 Lyrics Karaoke Player with MP3 & text

html5-lyrics-karaoke-player screenshot 3

Manage other HTML5 Lyrics Karaoke Songs

html5-lyrics-karaoke-player screenshot 4

Proccess HTML5 Lyrics Karaoke Song -> Listen then click same lyrics text

html5-lyrics-karaoke-player screenshot 5

WordPress Shortcode for HTML5 Lyrics Karaoke Player

Credit

Audio.js Player

HTML5 Audio Read-Along

Android HTML5 Audio duration and loadProgress in audio.js


Hits: 5558  

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);

Audio.js with Volume Control


Hits: 13089  

I was working on HTML5 MP3 Player Project using audio.js and I got Audio.js with Volume Control to control the volume for the Flash alternative player?

Volume Control - audio.js

<script>
      audiojs.events.ready(function() {
        var as = audiojs.createAll(),
            audio = as[0],
            ids = ['vol-0', 'vol-10', 'vol-40', 'vol-70', 'vol-100'];
        for (var i = 0, ii = ids.length; i < ii; i++) {
          var elem = document.getElementById(ids[i]),
              volume = ids[i].split('-')[1];
          elem.setAttribute('data-volume', volume / 100)
          elem.onclick = function(e) {
            audio.setVolume(this.getAttribute('data-volume'));
            e.preventDefault();
            return false;
          }
        }
        
      });
    </script>
<audio src="audiofile.mp3"></audio>
    <p><a href="#" id="vol-0">Volume: 0%</a></p>
    <p><a href="#" id="vol-10">Volume: 10%</a></p>
    <p><a href="#" id="vol-40">Volume: 40%</a></p>
    <p><a href="#" id="vol-70">Volume: 70%</a></p>
    <p><a href="#" id="vol-100">Volume: 100%</a></p>

You can also use the same volume as in https://github.com/dz0ny/AudioJS