How to play an anvil.BlobMedia audio object in browser

Anvil Q&A
1

Hi all,

Trying to get an audio file generated in Colab (using Google’s cloud based texttospeech) to play in the browser. Based on some other Q&As, I’ve been able to return an mp3 file that automatically prompts a download. But I would like to play it instead.

How would you pass a BlobMedia object to javascript so that it could be played?

I have this in a Colab function:

tts_blob = anvil.BlobMedia('audio/mpeg', data, name='audio.mp3')
return tts_blob

And anvil.media.download(tts_blob) works in terms of prompting the download. But how would I get tts_blob to replace the src audio in something like:

<!-- Audio file -->
<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autostart="false" ></audio>

<script>
function PlaySound() {
          var sound = document.getElementById("audio");
          sound.play()
      }
</script>
2

You might want to look at libraries like this :

which looks like it gives you an audio player that should run in the browser. There’s documentation elsewhere on the Anvil site which explains how to call JS libraries from Anvil code.

(I’ve not used this or any other audio library so I can’t help too much)

3

See if the examples found in this thread help:

If not I can share some code I’ve used to do something similar.

4

Thanks, I’ll take a look.

5

Some code would be great, if you have something that shows how the media object can be accessed by the JavaScript code. I am probably missing something basic like “the blob has to be saved somewhere first”, but I thought perhaps that it could just be streamed as a blob, without having to save it to a URL somewhere. Just unfamiliar with what is possible with media blobs of the type that can be generated through python on Colab.

6

As I look at it now, the relevant code is spread out over enough places that it’s probably better to look at an example app. I think I adapted the example here:

If I’m recalling correctly, the idea is to save the media object to Data Tables. That gives you a url you can pass to JavaScript. I don’t know enough to say whether it’s possible to stream it as a blob. This way worked for my purposes and I stopped there. :slight_smile:

1 Like