1

My application stores .wav audio files in AWS S3. Links to these audio files are shared to the users and these audio files failed to play in iOS devices. I have tested this across multiple browsers like Brave, Chrome and Safari in iOS devices and the issue is persistent. However, the audio files play without any issue in Mac OS and Android devices. This proves that the audio files are indeed playable and not corrupted.

When I try to play the audio in iOS devices the screen appears to be as follows: enter image description here

I am not sure how to debug this issue since there is not much info on Google. Any pointers on how to go about fixing this issue is greatly appreciated.

Update As requested I am providing the example code

Function uploading audio file to S3:

    fun putAudioObject(key: String, file: File) {
        try {
            logger.info("Saving file: $key")

            // client here is AmazonS3 client from Java SDK for AWS
            client.putObject(bucket, key, file)
        } catch (e: Exception) {
            logger.error("Failed to put object with key: $key to bucket: $bucket. Error: ${e.message}")
            throw ExternalServiceException("S3", e)
        }

There is no meta data added unfortunately. But I checked the S3 console, each object has an autogenerated content-type: audio/x-wav added.

Vino
  • 2,111
  • 4
  • 22
  • 42
  • Does the object in Amazon S3 have the correct `Content-Type` metadata? – John Rotenstein Nov 07 '21 at 20:47
  • Is there anything in the developer console? I’d be surprised if there weren’t some kind of message. – fdcpp Nov 08 '21 at 09:40
  • @JohnRotenstein The `Content-Type` is defined as `audio/x-wav`. I also tried with `audio/wav` same result. – Vino Nov 08 '21 at 11:47
  • @fdcpp This is on iOS mobile device. I don't think there is developer tools for mobile devices. The audio plays perfectly on desktop and Android devices. – Vino Nov 08 '21 at 11:48
  • Ah, that's a problem, [as there are](https://developer.apple.com/safari/tools/). You would never be left in a situation where you were completely unable to debug your site on iOS as that would be ludicrous to leave developers in the dark like that. A [quick search will reveal how to enable these tools](https://www.lifewire.com/activate-the-debug-console-in-safari-445798) – fdcpp Nov 08 '21 at 13:49
  • Or https://apple.stackexchange.com/questions/333873/wirelessly-debug-safari-web-app-running-on-ios-using-safari-on-macos – fdcpp Nov 08 '21 at 13:50
  • To have any hope of having this answered your going to have share some kind of example code. – fdcpp Nov 10 '21 at 05:35
  • @fdcpp Thank you. As suggested, I have added the example code. – Vino Nov 10 '21 at 12:22
  • Ideally the code should be self-contained. Otherwise, the only way for someone to test this is to fill in all the missing pieces _and_ make sure those pieces replicate problem. As it is you‘re asking the SO community to do a lot of heavy lifting. – fdcpp Nov 10 '21 at 13:13
  • Are you using Kotlin? – fdcpp Nov 12 '21 at 08:09
  • @fdcpp Hey sorry for late response. The code is self contained. Essentially, I am putting a wav file to S3. That's exactly the method provided does. Takes a file and an object key name and persists it in S3. I am not whats the heavy lifting required here. Also yes, I am using Kotlin :) – Vino Nov 12 '21 at 12:35
  • Might be worth using the kotlin tag in your question? No? If your user is using a browser then they must be accessing a web address. The expectation would be to have a recreation of that page in simple HTML/JavaScript that someone else can test. Or, a link to the page or an example page? – fdcpp Nov 12 '21 at 13:05
  • @fdcpp Really sorry for the late response. I have been sick. I tried debugging with the web inspector, for some weird reason there is no error message. It just says error occurred trying to load resource. This is an example URL https://app.virtualagentapp.com/v1/agents/b7b651ea-abfc-422d-a5e9-4f197baeb874/conversations/9a51b7e9-1f1a-45d6-a42b-d9829b7b5560/recordings?full=true. In the meantime I have been trying to implement the suggestions provided by the listed answer. – Vino Nov 28 '21 at 10:17
  • I get a `Failed to load resource: Plug-in handled load` error on iOS Safari and macOS Safari. This question may have some ideas https://stackoverflow.com/questions/18103103/failed-to-load-resource-plugin-handled-load-on-ios but there isn't anything there that is a straight solution, just lots of "workarounds" – fdcpp Nov 28 '21 at 11:07

1 Answers1

2

Sorry I don't know Kotlin, but when I faced this issue, I did the following, hope it helps you

Do this first-> it should work

Configure your Web Server

"... HTTP Live Streaming can be served from an ordinary web server. Configure your web server as normal and associate the MIME types of the files being served with their file extensions. The following table shows the MIME types for HTTP Live Streaming..."

File Extension, encode as AAC or AC-3 audio is the most compatible

.. If your web server is constrained with respect to MIME types, you can serve files ending in .m3u with MIME type audio/mpegURL for compatibility...

Troubleshoot

On your source side S3, ensure you encode your data for streaming correctly (step 1), and consider AWS has CloudFront: you may want to look at this streaming ref first https://aws.amazon.com/cloudfront/streaming/

  1. Make sure you encode your data for streaming correctly, like so https://developer.apple.com/documentation/http_live_streaming/preparing_audio_for_http_live_streaming

  2. To understand more on apple streaming look at apples HLS live streaming protocol for media http://en.wikipedia.org/wiki/HTTP_Live_Streaming

  3. To help/ Jump Start: Here is a nice react example on how to stream using cloudfront on Apple/Android dev ices https://codeburst.io/audio-streaming-in-react-native-using-amazon-s3-and-cloudfront-8df3cc2d8b91

Transformer
  • 6,963
  • 2
  • 26
  • 52