HTML5 Audio in not playing on android device

Question

Hello Friends i have developed my music site and used html5 audio. it's successfully running on desktop but not playing/running audio on android mobile device.

my code is following to control html5 audio .

HTML:

<audio src="./files/track01l.mp3" id="player"></audio>  
        <div class="col-md-4">
        <button id="play" class="playpause"><span class="glyphicon glyphicon-play"></span></button>
        <button id="pause" class="playpause"><span class="glyphicon glyphicon-pause"></span></button>
        <button id="loop"class="playpause"><span class="glyphicon glyphicon-repeat"></span></button>
        <button id="removeloop"class="playpause"><span class="glyphicon glyphicon-resize-horizontal"></span></button>

Jquery/Javascript:

$(document).ready(function(){
    $("#pause").hide();
    $("#removeloop").hide();
    $('#play').on('click', function() {
        document.getElementById('player').play();
        $(this).hide();
        $("#pause").show();
    });

    $('#pause').on('click', function() {
        document.getElementById('player').pause();
        $(this).hide();
        $("#play").show();
    });

    $('#player').on('timeupdate', function() {
        $('#seekbar').attr("value", this.currentTime / this.duration);
    });
    $("#loop").click(function(){
        $("#player").attr('loop','');
        $(this).hide();
        $("#removeloop").show();
    });
    $("#removeloop").click(function(){
        $("#player").removeAttr('loop','');
        $(this).hide();
        $("#loop").show();
    });
});

how can i play my html5 audio on andriod devices using my own controls. thanks.

Answer 1

I have recently discovered an issue with Firefox on android devices. The short version is that files with .mp3 file format do not play. I switched to .ogg format and didn't have an issue. Chrome seems to not have an issue with .mp3 so not precisely sure where the problem actually is. I tested this issue using Firefox and Chrome on a Samsung Galaxy S5. Ironically, I also didn't have any issues with Silk on the Kindle Fire HD but did have an issue with Safari for windows. I sideloaded Firefox onto the kindle as well and that wasn't able to play .mp3 files with html5 audio. So the first step is to simply change the audio format and see if that fixes the issue.

Answer 2

Ok so I finally figured this out,

HTML:

<audio id="soundaudio" class="hidden"></audio>

jQuery:

soundelement = document.getElementById("soundaudio");
soundelement.play();
soundelement.src = "source.mp3";

This happens at the start by forcing the user to click a "start" button, then you can use

soundelement.play()

whenever you want.