Question

For some odd reason the HTML5 Audio API won’t give me access to currentTime in iOS 4 and 5 for iPads and iPods. I need to adjust currentTime whenever an audio element is played, but it acts like the current time isn’t accessible. Looked everywhere for an answer on this and I can’t figure it out. My code below works fine in all modern browsers, so I’m a bit stumped.

My HTML markup

<p>
    <a class="audio" href="assets/audio/ambient-sounds-1.mp3" data-flash="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/niftyplayer.swf" data-mp3="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/ambient-sounds-1.mp3" data-ogg="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/ambient-sounds-1.ogg">
        Ambient Sounds
        <span class="audio-play">Play</span>
        <audio preload="">
            <source preload="" src="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/ambient-sounds-1.mp3" type="audio/mpeg">
            <source preload="" src="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/ambient-sounds-1.ogg" type="audio/ogg">
        </audio>
    </a>
</p>

<p>
    <a class="audio" href="assets/audio/city_street.mp3" data-flash="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/niftyplayer.swf" data-mp3="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/city_street.mp3" data-ogg="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/city_street.ogg">
        City Street Sounds
        <span class="audio-play">Play</span>
        <audio preload="">
            <source preload="" src="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/city_street.mp3" type="audio/mpeg">
            <source preload="" src="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/city_street.ogg" type="audio/ogg">
        </audio>
    </a>
</p>

<p>
    <a class="audio" href="#" data-flash="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/niftyplayer.swf" data-mp3="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/crash.mp3" data-ogg="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/crash.ogg">
        Loud Crash
        <span class="audio-play">Play</span>
        <audio preload="">
            <source preload="" src="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/crash.mp3" type="audio/mpeg">
            <source preload="" src="http://athens.sierrabravo.net/~ablue/plato/videoplayer/assets/audio/crash.ogg" type="audio/ogg">
        </audio>
    </a>
</p>

My JavaScript

AudioPlayer = {
    init: function () {
        var player = this;
        this.audio = $('.audio'); // Save and cache all audio elements so they can be targeted by mass stop()

        player.audio.each( function() {
            // Bind each audio element
            player.bind($(this));
        });
    },

    bind: function (object) {
        var player = this;

        object.bind('touchstart click', function() {

            // get the real DOM element, not the jQuery array
            var audio = $(this).find('audio').get(0);

            if(audio.paused) { // Check if its playing
                player.play(audio);
            }
            else {
                player.stop(audio);
            }

            return false;
        });
    },

    play: function(audio) {
        // Stop all existing audio elements and set them to 0
        this.audio.each( function() {
            var audioOther = $(this).find('audio').get(0);
            audioOther.pause();
        });

        // Play the audio element
        if(audio.currentTime) audio.currentTime = 0;
        audio.play();
    },

    stop: function(audio) {       
        if(audio.currentTime) audio.currentTime = 0;
        audio.play();
    }

};

Answer 1

There is an answer as to why my code doesn’t work, iOS 4 and 5 need the entire audio element to be completely destroyed (terrible solution, but it works). Here is a quick rundown on how to fix my issue if you’ve run into it.

1. Insert only 1 element into the page (I inserted mine right before the closing tag).
2. On click to play a new audio element, completely destroy the existing and rebuild it from scratch with the new track you want to play.
3. Call .play on the audio element and you’ll be good to go.