Inline audio player in Sanity.io rich text

export default {
  name: "contentBody",
  title: 'Body of content',
  type: 'array',
  of: [
    {
      type: 'block',
      of: [
        {
          name: 'inlineAudio',
          type: 'file',
          title: 'Inline audio player',
          options: {
            accept: 'audio/*',
          },
        },
      ],
    },
    {type: "image"}
  ]
}

import * as React from 'react'
import BlockContent from '@sanity/block-content-to-react'

import AudioPlayer from '../AudioPlayer'

const serializers = {
  types: {
    // Handler for the "inlineAudio" _type
    inlineAudio: ({ node }) => {
      // The component we use to render the actual player
      return <AudioPlayer {...node} />
    },
  },
}

const ArticleBlockContent = (props) => {
  return (
    <BlockContent
      blocks={props.blocks}
      serializers={serializers}
    />
  )
}

export default ArticleBlockContent

import * as React from 'react'

const AudioPlayer = (props) => {
  // Used to store the audio element once instanciated
  const [audioEl, setAudioEl] = React.useState()

  if (!props.asset?._ref) {
    return null
  }
  
  const { _ref: ref } = props.asset
  // Example:
  // From: file-ff7d1c2d7bd5ac367359d57f0319f5f458bc3c3d-m4a
  // To: https://cdn.sanity.io/files/q2j8cwsg/production/ff7sfgc2d7bd5ac367359d57f0319f5f458bc3c3d.m4a?dl

  const assetRefParts = ref.split('-') // ["file", "ff7...", "m4a"]
  const id = assetRefParts[1] // "ff7..."
  const format = assetRefParts[2] // "m4a"
  const assetUrl = `https://cdn.sanity.io/files/${process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}/${process.env.NEXT_PUBLIC_SANITY_DATASET}/${id}.${format}`

  function playAudio() {
    try {
      if (!audioEl) {
        const audio = new Audio(assetUrl)
        setAudioEl(audio)
        audio.play()
      } else {
        audioEl.play()
      }
    } catch (error) {}
  }
  return (
    <button onClick={playAudio} aria-label="Play audio">
      🔊
    </button>
  )
}

export default AudioPlayer