HTML5 Audio on iOS

Ionic Framework ionic-v3
1

I’m currently working on a project that requires me to play streamed audio from a server. Using HTML5 Audio, I came up with this:
audio.html:

<audio controls controlsList="nodownload">
   <source [src]="audioUrl" type="audio/mpeg">
   We couldn't load the podcast.
</audio>

Now, from Android, it works absolutely perfectly. It even plays in the background. But when I built it for iOS, the controls are there and are responding but would not emit any sound. Oddly enough, when I tested it on the iOS Simulator, it works as well as it was on Android.

Absolutely freakin’ weird…

I absolutely made sure that:

  • My iOS device’s volume was maxed-out.
  • My iOS device’s Silent switch was turned OFF.
  • Inter-App Audio was enabled from XCode (although I highly doubt that was even necessary).

Environment:

$ ionic info

cli packages: (/dat_path/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.4.0

System:

    Node  : v6.11.2
    npm   : 3.10.10
    OS    : macOS Sierra
    Xcode : Xcode 8.3.3 Build version 8E3004b
2

Can you programmatically force it to play with .play() ?

3

Sounds good, doesn’t work.

Seems to only be a problem when the app is launched from an actual iOS device. When I ran it in an iOS Simulator, it works perfectly.

4

What are the specs of your device? Safari version, iOS version?

5

iOS 10.3.3.

Safari version… How do I get that?

6

Related?
http://debuggerdotbreak.judahgabriel.com/2016/12/13/its-almost-2017-and-html5-audio-is-still-broken-on-ios/

1 Like
7

Hello, @cnswico Have you found solution for this issue?