Playing a WAV file on iOS Safari

Playing WAV files on iOS Safari requires specific HTTP headers to ensure proper audio streaming and playback compatibility.

Required Headers for iOS Safari

iOS Safari needs these HTTP headers to properly handle WAV file playback:

Content-Range: bytes 0-1023/2048
Content-Type: audio/wav
Accept-Ranges: bytes
Content-Length: 2048

Complete Server Implementation

Here's a Node.js example showing how to serve WAV files with proper headers:

const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();

app.get('/audio/:filename', (req, res) => {
    const filename = req.params.filename;
    const filePath = path.join(__dirname, 'audio', filename);
    
    // Get file stats
    const stat = fs.statSync(filePath);
    const fileSize = stat.size;
    
    // Handle range requests for iOS Safari
    const range = req.headers.range;
    
    if (range) {
        const parts = range.replace(/bytes=/, "").split("-");
        const start = parseInt(parts[0], 10);
        const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
        
        res.status(206);
        res.header({
            'Content-Range': `bytes ${start}-${end}/${fileSize}`,
            'Accept-Ranges': 'bytes',
            'Content-Length': end - start + 1,
            'Content-Type': 'audio/wav'
        });
        
        const stream = fs.createReadStream(filePath, { start, end });
        stream.pipe(res);
    } else {
        res.header({
            'Content-Length': fileSize,
            'Content-Type': 'audio/wav',
            'Accept-Ranges': 'bytes'
        });
        
        fs.createReadStream(filePath).pipe(res);
    }
});

Client-Side HTML Audio Element

Use the HTML5 audio element with proper attributes for iOS compatibility:

<audio controls preload="none">
    <source src="/audio/sample.wav" type="audio/wav">
    Your browser does not support the audio element.
</audio>

<script>
const audio = document.querySelector('audio');

// Handle loading and playback
audio.addEventListener('loadstart', () => {
    console.log('Loading started');
});

audio.addEventListener('canplay', () => {
    console.log('Audio can start playing');
});

audio.addEventListener('error', (e) => {
    console.log('Audio error:', e);
});
</script>

Key Requirements

• Accept-Ranges: bytes - Enables partial content requests
• Content-Range - Specifies byte range for streaming
• Content-Type: audio/wav - Proper MIME type
• HTTP 206 status - For partial content responses

Common Issues

Without proper range request handling, iOS Safari may fail to play WAV files or show loading issues. The server must support HTTP range requests (status 206) for reliable playback.

Conclusion

iOS Safari requires specific HTTP headers and range request support for WAV playback. Implement proper server-side handling with Content-Range headers and Accept-Ranges support for reliable audio streaming.