Unable to play audio of OGG format in Safari Browser

Issue

• While playing the audio in Safari Browser, it shows an error, however, the same audio is working fine in other browsers.
• Here is the below code for adding the audio on the portlet with <audio> tag:

  <audio width="300" height="32" controls="controls"><source src="filename.ogg" type="audio/ogg" /><source src="filename.mp3" type="audio/mpeg" /></audio>

 

Environment

• Liferay DXP [ All updates]
• Safari Browser

Resolution

• In the mentioned code, the 'OGG' audio extension is used which is not supported by the Safari Browser. 
• Ogg Vorbis audio format was supported in older Safari versions, recent versions of Safari (specifically after Safari 14.1) have dropped support for it; therefore, it's generally recommended to use alternatives for audio on the website.
• Here are some audio formats which is supported by Safari Browser:
  
  • MP3: While not without its issues, MP3 is still widely supported.
  • AAC: Offers good quality and is supported by most modern browsers.
  • WAV: High-quality but large file sizes.
• Below is the sample HTML code for adding the audio on the portlet with the <audio> tag:
  

  <audio width="300" height="32" controls="controls">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.aac" type="audio/aac">
    Your browser doesn't support audio.
  </audio>

Additional Information

• https://discussions.apple.com/thread/4580542?sortBy=best
• https://caniuse.com/ogg-vorbis