CODEWITHSUNDEEP
nginxsafarihtml5-audio
user3091850
user3091850

Reputation: 102

WAV files will not play on Safari or IOS when served with Nginx

I have a web application with an audio element that works well on all browsers and platforms when served from gunicorn or a development server.

When served with Nginx, WAV files will not play on IOS or Safari/OS X. If I enable "controls" on the audio element I get "Loading" and nothing happens. No error, no sound, nothing.

enter image description here

Relevant HTML/Javascript:

<audio id='audio' controls>
        <source id='audioSource' src='' type='audio/wav'>
        Your browser does not support this audio tag.
</audio>

<button type='button' onclick='previewSound()'><i class='fa fa-volume-up fa-lg'></i></button>

function previewSound() {

        // Get the id of the message box
        // which is also the id of the record
        // and the name of the wav file. :)
        var messageId = $('#messageSel').val();
        if(messageId=='') return;

        // Set up the audio element.
        var myAudio = document.getElementById("audio");
        var mySource = document.getElementById("audioSource");
        mySource.src = '/dynamic/Message/' + messageId + '.wav';

        // Play the sound
        myAudio.load();
        myAudio.play();

}

Relevant /etc/nginx/sites-enabled/*: 

server {
...
        location /dynamic {
                try_files $uri $uri/ =404;
        }
...
}

Relevant /etc/nginx/mime.types:

audio/wav     wav;  /* also tried audio/x-wav  wav;  */

Relevant files:

root@b827ebd0459d:/var/www/product/dynamic/Message# ls -al
total 1316
drwxrwxrwx 2 www-data www-data   4096 Jun 20 23:09 .
drwxrwxrwx 3 www-data www-data   4096 May 30 14:20 ..
-rw-rw-rw- 1 www-data www-data 229420 Jun 15 18:35 1.wav
-rw-rw-rw- 1 www-data www-data 344108 Jun 18 21:50 2.wav
-rw-rw-rw- 1 www-data www-data 753708 Jun  9 17:25 3.wav

Any troubleshooting suggestions are appreciated. I have read the other similar questions/answers and they do not appear to address this specific issue.

Upvotes: 0

Views: 901

Answers (1)

user3091850
user3091850

Reputation: 102

There were several issues: 1) my SSL certificate was incorrect 2) my SSL certificate was using the hostname when my app was at https://someothername which is set by dns. 3) I needed to actually install the certificate on the devices instead of just clicking "proceed", etc.

After I fixed these issues Safari/iOS/OS X are working properly.

Upvotes: 1

Related Questions