Simple Audio Player

Anvil Q&A
1

I’m trying to implement a simple audio player (preferably in Python only) that will play a short mp3 clip, and then allow the user to vote yes or no (it’s a transcription validation app).

I’ve tried implementing some javascript audio players but keep running into issues as I have no experience with javascript.

There do appear to be simple python audio playing packages (simpleaudio as an example, or playsound, which would be ideal for my purposes). Is there a package already available in Anvil that could be used for this purpose?

Edit: It seems most of these packages assume Python is installed on the machine and plays it through the machines native audio playing. This wouldn’t seem to work in a browser from what I understand. It would still be great if there was a pure Python way to do this.

2

HTML5 seems to be what I need as it has an audio player built in! I added the following barebones audio player as a custom html form.

<figure>
    <audio controls 
           src='' 
           preload="auto"
           controlsList="nodownload">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

However, I’m not quite sure how to change the source from my server module in a programmatic way.

Edit: It seems like I should be able to use data binding to pass through a source?

3

Hello.

In case it helps, have you seen this thread which provides instructions and examples for playing audio?

I believe sounds can be preloaded and called via call_js.

4

I’m really trying to avoid JavaScript. The player is html only, so would it work to use call_js to modify html? I’m very unfamiliar with it.

5

I wanted to post the solution I found so others could see. In the end it seems you have to use Javascript.

I created a custom HTML form called “Player” that has the HTML audio player and Javascript function. Here is the code:

<script>
  function loadClip(x){
    
    var player=document.getElementById('player');
    var sourceMp3=document.getElementById('player');
    sourceMp3.src=x;
  }
</script>

<figure>
    <audio controls preload="auto" controlsList="nodownload" id="player">
      <source id="sourceMp3" src="" type="audio/mp3" />
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

Note how I put the script above the body (just like you would in Python). I then figured out how to call the Javascript function in Python on my form (although it could also be done in a server function). I chose to do it in the form as there is nothing sensitive about the function.

def button_click(self, **event_args):
  """This method is called when the button is clicked"""
  src_url = anvil.server.call('load_url')
  self.audio_player.call_js('loadClip', src_url)

I added the custom HTML form to my main form as an object called ‘audio_player’. I can then reference self.audio_player and use the call_js method. The src_url is loaded from a server function.

And it works! I’ve never used Javascript before but some helpful code snippets on StackOverflow and Jsfiddle got me there.

10 Likes
6

Hi Robert,

Thanks for this great solution. I’m new to Anvil and I want to use your code for my own audio player, but I can’t make sense of a few of the steps.

  1. Where exactly did you insert the HTML code?
  2. How did you reference it in your main page?

Do you perhaps have screenshots?
Thank you very much!
Regards,
Stephan

7

Hi Stephan! Welcome to the Anvil community.

The HTML and script can go in a custom HTML form. Then you can use that as a custom component wherever you would like. What I did was make an HTML file in the app assets and put it there. Either way it works.

I made this for a defunct project where users would be able to listen to audio and transcribe it. Similar to the Mozilla CommonVoice project.

Because it’s defunct I don’t mind sharing the app. There are some connection strings and secrets in the app, but they are all dead now so no infosec issue.

Here is the clone link so you can see how I did it.

https://anvil.works/build#clone:SRMAJ3257NG3RIMD=JP3XLNH47KAAJYP2XXVCKLXI

1 Like
9

Hi Robert,

Thanks for welcoming me to the community and your detailed response with the app. I appreciate the help!
I played around with the app for a few hours and actually asked a few questions, but then I find the answers right after I post the questions, so I will just leave it at the thank you message :slight_smile:

Regards,
Stephan

3 Likes