Why ionic html5 audio reads from cache in iOS 11?

Ionic Framework ionic-v3
#1

My ionic app uses html5 audio to play a audio file, which is in prior recorded by user using Native Media Plugin with the mobile microphone.

let audioAsset = new Audio(local_recorded_file_URI_by_user);
audioAsset.play();

In iOS 10 or Android it works as expected.

In iOS 11, the issue appears. html5 audio reads and plays from a cached audio copy. Due to this, it only plays the very first record no matter how many times the user record and save to the same audio file.

One possible solution is to let users record each time to files with different names. But this will add a lot of unnecessary complications.

Is this something I need to tweak wkwebview https://ionicframework.com/docs/wkwebview/ ?

Note. cordova-plugin-wkwebview-engine plugin is used for iOS. There is a reason that Native Media Plugin is not used, but too long story to put here.

Br, Xi

#2

Are you 110% sure it’s loading a cached version and not failing to overwrite the existing file? If it is actually a cached version, you could try to append ?v=randomvalue to the file URI, not sure if that works like expected for file URIs … But I would first make sure that it’s not an overwrite issue :slight_smile:

#3

Yeah, I think so, because:

  1. the issue occurs only in iOS 11. It works as expectedin iOS 10.
    I upgraded one iPhone today from iOS 10 to iOS 11, confirmed this symptom.

  2. My code literately deleted the previous recording before recording the new, html5 audio loads the old one (issue persists…

I will give random param a try, but dont have much hope on it.

1 Like