WebM and Opus in Safari

Question

Using patent-free audio and video codecs on the web has always been problematic due to poor support in Safari. According to the Safari 15 release notes, though, this might be starting to change. WebM video is apparently now supported in MSE on iPadOS 15, and the Opus audio codec is supported in WebM containers.

According to Can I Use, though, (WebM, Opus) the situation didn't change with i(Pad)OS 15. On mobile devices, WebM is only supported for WebRTC, and Opus only works if you use a CAF container—which no other browser supports.

My experiments suggest that, unfortunately, Can I Use is correct. I was wondering, though, if anyone can clear up the mystery. Are the release notes just wrong, as seems to be the case? Am I misunderstanding the release notes somehow? Is there some trick that allows you to use these codecs after all?

Answer 1

Safari support is inconsistent, but the recent release of 17.5 fixed some issues.

https://opus-bitrates.anthum.com/audio/music-96.webm (audio/webm; codecs=opus)

⚠️ when constructing <audio> from Blob

This failed prior to the release of Safari 17.5

(async () => {
  const url = 'https://opus-bitrates.anthum.com/audio/music-96.webm'
  const buffer = await (await fetch(url)).arrayBuffer()
  const blob = new Blob([buffer], { type: 'audio/webm; codecs=opus' })
  const audio = new Audio(URL.createObjectURL(blob))
  audio.controls = true
  document.body.appendChild(audio)
})()

✅ when using <audio> with <source>

<audio controls>
  <source type="audio/webm; codecs=opus"
          src="https://opus-bitrates.anthum.com/audio/music-96.webm" />
</audio>

✅ when constructing <audio> from URL

const url = 'https://opus-bitrates.anthum.com/audio/music-96.webm'
const audio = new Audio(url)
audio.controls = true
document.body.appendChild(audio)