Play sound when called

[dev01]

I found this script which will allow me to play a sound on click using HTML5, but I can’t wrap my mind around what to do in anvil. http://plnkr.co/edit/S9Ipogq4M2fqWVKPvvEh?p=preview&preview

The script part is straightforward. I just copied this into the HTML

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

Now I need to call it as a result of a function & I don’t know where to start. The remaining code in the HTML5 page was: <a onclick="PlaySound()"> Play</a>

Can anyone help me connect this to a function? The use case is that if a person enters data, I want to validate it. If the data is wrong, I would like to alert them with a beep.

[campopianoa]

Hi,

Sorry I’m just on my way out but have you seen this post?

Simple Audio Player

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"> <sourc…

There is also this thread which may be useful:

Playing soundssss

Can I play sounds? I don’t mean long ones, just little ones, like explosions or gunshots. Telemix - the changing face of telecoms.

Just thought I’d put these here in case they will help.

[stucork]

You’ve got some options.

Here’s one…
If you are using this component with the Material Design Standard Template I would:

• put the audio tags in the standardpage.html
• put the javascript function in the standardpage.html where all the other functions are

then add a button in the usual way and do

def button_1_click(self, **event_args):
    self.call_js('PlaySound')
    #do other stuff

Clone link
https://anvil.works/build#clone:AZZM4SXTC2WEEAQW=CL5LYUI3JUDBVJZEABURKH7D

if the button is a subform and Standardpage html is still the parent form then change:
self.call_js to be js.call_js

[dev01]

Woah! I was not expecting such a complete solution. Thanks