docs: set explicit mime type when creating a blob

Author: OrbisK

docs/basic-example.vue

@@ -8,6 +8,7 @@ const {
   stop,
   pause,
   resume,
+  mimeType,
   state,
 } = useMediaRecorder({ constraints: { audio: true } })
 
@@ -42,7 +43,7 @@ function handleStartClick() {
 const audio = computed(() => {
   if (!data.value?.length || state.value !== 'inactive')
     return
-  const blob = new Blob(data.value)
+  const blob = new Blob(data.value, {type: mimeType.value})
   return URL.createObjectURL(blob)
 })
 </script>

docs/examples.md

@@ -4,6 +4,11 @@ outline: deep
 
 # Examples
 
+::: warning
+Due to a [bug in WebKit (Safari)](https://bugs.webkit.org/show_bug.cgi?id=198015), the `<audio>` source blob does only
+work if you set an explicit `type` attribute. This is not a problem with the composable, but with the browser itself.
+:::
+
 ## Basic Example
 
 This is a basic example of how to use the `<script setup>` syntax in a Vue component.

docs/timeslice-example.vue

@@ -8,6 +8,7 @@ const {
   stop,
   pause,
   resume,
+  mimeType,
   state,
 } = useMediaRecorder({ constraints: { audio: true } })
 
@@ -44,7 +45,7 @@ function handleStartClick() {
 const audio = computed(() => {
   if (!data.value?.length || state.value !== 'inactive')
     return
-  const blob = new Blob(data.value)
+  const blob = new Blob(data.value, {type: mimeType.value})
   return URL.createObjectURL(blob)
 })
 </script>

vitest.workspace.js

@@ -9,6 +9,7 @@ export default defineWorkspace([
       browser: {
         enabled: true,
         name: 'chromium',
+        headless: true,
         provider: 'playwright',
         providerOptions: {
           context: {