Skip to content
Get help on Slack

Trouble playing audio from *.mp3* files in Sanity blog site

4 replies
Last updated: Nov 28, 2022
Hi everyone. I've been stuck on something for a few days now, and after looking online and trying different things, I still can't figure it out. I haven't been using Sanity that long and have not yet had to do this, so I don't know what I'm doing wrong.
So I'm building like a blog site that displays cards with student names, bios, an image, etc. Each card also has a button that when clicked, should play a short audio clip from an
.mp3 file. I am able to see all of the information displayed in the browser when the information is entered in Sanity (the text for the name bio, the image file, etc.). However, I am not able to hear the audio when I click the button to hear the audio. When I click the button, I get the error in the console (see screenshot). As I understand from the documentation , the 
file
type is used for all other file types such as documents and audio files. Going by this information, I added to my "student" schema (lines 17-19 in my screenshot). Then, in my component, I added audio to my query (see "query" screenshot", line 10). Finally, down below in the component, I added a click event for the audio (see "button" screenshot, lines 4-7), using 
student.audio
in order to get the .mp3 audio from Sanity. Up above, I used 
student.name
to get the name, 
student.image
to get the image, etc., and they all worked. The audio is the only thing I am having problems with.
However, I noticed that when I use a URL instead of 
student.audio
it works, though I need it to work when an .mp3 file is added into Sanity, and not a URL:
let audio = new Audio('<https://assets.coderrocketfuel.com/pomodoro-times-up.mp3>');
However, it does not work when I use 
student.audio
and this is when I get the error in the console. I don't know what I am doing wrong and how I can make it work so that the .mp3 audio plays. Any thoughts or ideas? Maybe my schema or query or both are incorrect? Any ideas would help. And by the way, there is nothing wrong with the .mp3 files I'm using (they all work), so it's not that. Thank you so much!
Nov 27, 2022, 10:18 PM
File will contain a reference to an asset, like image. Try apply the same logic in your groq query as you have for image and reference it by student.audio.asset.url
Nov 27, 2022, 10:26 PM
user G
Thank you, Daniel. I'll play around with that and see if I can get that to work.
Nov 27, 2022, 10:41 PM
user G
Update: I finally got it! Using what you mentioned, I wrote my GROQ query like this:

        audio{
          asset->{
          _id,
          url
        }
      },
And then down in the button, I referenced it the way you said:

onClick=
      {() => {
        let audio = new Audio(student.audio.asset.url);
        audio.play();
      }}
Thanks again for pushing me in the right direction!
Nov 28, 2022, 2:07 AM
Awesome!
Nov 28, 2022, 9:42 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?