Recently I encountered a strange problem when playing an m4a audio file in Safari.
If I directly open the m4a URL in Safari, it plays well, but if I add the m4a file to an HTML5 audio tag <audio>, it just keeps on loading and can never be played.
The m4a file plays well in Chrome and Firefox HTML5 player, just not in Safari.
After some testing and investigation, I realised that when directly open the m4a URL in Safari, it probably uses the codec of MacOS, but when adding the file to an HTML5 audio tag <audio>, it will only use the codec available to Safari. And there is a difference.
To fix the problem, we need to re-encode the m4a file and make it compatible with Safari HTML5 player.
The following steps will show you how to convert an m4a file to Safari HTML5 compatible with iTunes:
Step 1 – Launch iTunes, goto top menu iTunes -> Preferences, General tab, click the button Import Settings, change the option Import Using to AAC Encoder, change the Settings to High Quality (128 kbps).
Step 2 – In iTunes, select Music, find your song in the Music Playlists. If your m4a audio is not listed there, right click on the m4a file, select Open With -> iTunes and play it with iTunes.
Step 3 – Select the song, then goto iTunes top menu File -> Convert -> Create AAC Version.
Step 4 – After the conversion is done, drag the newly created file and drop it on desktop.