Using HTML5 Audio Tag

ionic-v1
1

I’m having some difficulty getting the HTML5 Audio Tag working on Android. The code below works fine when I run ‘ionic serve.’ However, when I try the same thing on andoid (ionic run android) no audio plays. The only change that allows audio to play on android is if I link to an external link rather than fetch the audio locally.

Any thoughts?

<div class="row">
    <div class="col">
      <center>
        <div data-tap-disabled="true" >
        <audio controls autoplay="true">                                        
                <source src="audios/local.ogg" type="audio/ogg">                                                        
        </audio>
        </div>
      </center>
    </div>  
</div>
2

Now im building music app too… In my app i tryed to use this solution too but and its worked fine. But none of controls are working so i now looking for solution may be ng-media module can help for us.
have a look at GITHUB
Please if you can make it work create a pen at codepen i will appriciate it.
Thank you!

3

Your code was working with just using the HTML5 Audio tag? And you were storing audios locally? Have you tried wrapping your audio tag with

<div data-tap-disabled="true" ></div>
4

My code was just audio tag. The source was streaming from icecast. withour wrapping tap-disabled

5

Hmm, what version of android are you testing this on?
It may be a case where the browser and platform do not support .ogg file formats

6

Android 4.0.3 LGE E612

7

With your case, it maybe that the directive isn’t supported for touch events.
Can you try with the native html audio tag?

@praxis take a look at this

http://www.w3schools.com/html/html5_audio.asp

8

Thanks for getting back @mhartington. My android version is 4.4.4.

What’s odd is that it doesn’t work when I just do ‘ionic run android’, but if I do it with the livereload option on android, it works fine. Any idea of whats going on?

9

Just curious, any reason why you can’t tried using the Cordova media plugin? I’ve had a lot better luck with that than I have any html5 audio. I feel like I’ve got a greater control and you won’t have to worry about mark down.

10

Hmm, it maybe a case where you need to reference the audio file differently for android,

src="/android_asset/www/sound.mp3"
11

@mhartington Just tried that. The path is working fine / it is finding the actual audio file. When the path isn’t working I’m not even able to press the play button. But when the path is working, I can press the play button and it turns into the pause button (indicating that the the audio is supposed to be playing). But nothing plays. Oddly it works when we have the --livereload option. (Image attached)

image
image.png1080×370 16.5 KB

Instead of using locally stored audios, I was thinking of using HTML5’s Speech Synthesis. Is there good cross-platform support for this?

1 Like
12

Did you ever solve this?

13

I don’t remember exactly, but I believe we ended up using the plugin for native functionality (something like this -https://github.com/apache/cordova-plugin-media)