Fixing a button problem?

Isaac Franks

unread,

Jul 4, 2018, 12:17:44 PM7/4/18

to DroidScript

I'm having an issue with a button test that I am doing. I want the buttons to be able to play individual sounds when pressed, then continue in a loop until the button is pressed again to stop it. I don't have the loop yet because I can't even get the buttons to play the sounds. I am still learning and have played with samples codes to create the following. Can anyone tell me how to add sound to the following buttons and if there are any errors in what I have put together? I want to use sounds from "https://www.soundjay.com/button-sounds-1.html", but honestly don't know how to do it.

<html>
<head>
    <meta name="viewport" content="width=device-width">
    <script src='file:///android_asset/app.js'></script>
</head>

<style>
    body { background-color: #ffffff; }
    .hello
    {
        font-size: 80;
        font-family: cursive;
        width: 100%;
        margin-top: 2em;
        text-align: center;
        color: #A310D3;
    }

    .styled {
    border: 0;
    line-height: 2.5;
    padding: 60px 40px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 50%;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
    background-color: rgba(255, 0, 0, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}

</style>

<body onload="app.Start()">

    <div class=hello> Test App </div>

    <p align="center" ><button class="styled">First sound</button></p>

    <p align="center"><button class="styled">Second sound</button></p>

    <p align="center"><button class="styled">Third sound</button></p>

</body>
</html>

BareK

unread,

Jul 4, 2018, 1:46:36 PM7/4/18

to DroidScript

You need to handle the onclick event of your buttons.

Here's a little example:

<p  align="center" ><button onclick="playSound1()" class="styled">First sound</button></p>
<p  align="center"><button onclick="playSound2()" class="styled">Second sound</button></p>
<p align="center"><button onclick="playSound3()" class="styled">Third sound</button></p>
   
<script>
    
    function OnStart()
    {
        //Create media players.
        player1 = app.CreateMediaPlayer();
        player2 = app.CreateMediaPlayer();
        player3 = app.CreateMediaPlayer();
            
        //Load files (can be ogg or mp3).
        player1.SetFile( "/Sys/Snd/Poing.ogg" );
        player2.SetFile( "/Sys/Snd/Trill.ogg" );
        player3.SetFile( "/Sys/Snd/Explode.mp3" );
    }
    
    function playSound1() 
    {
        player1.Play();
    }
        
    function playSound2() 
    {
        player2.Play();
    }
        
    function playSound3() 
    {
        player3.Play();
    }

</script>

Isaac Franks

unread,

Jul 4, 2018, 1:54:09 PM7/4/18

to DroidScript

Will that enable me to stop and play the sounds of the button upon pressing them? Can I still put in my styling of the buttons?

BareK

unread,

Jul 4, 2018, 2:16:42 PM7/4/18

to DroidScript

Not directly in the snippet I gave, but it's the way to go.

You should also look into the 'Audio Output' sample to experiment with playing/looping a file.

And these are the functoins you'll need:

player.Play();
player.Pause();
player.Stop();
player.SetLooping();
player.IsPlaying();
player.IsLooping();

The rest is up to you :)

Isaac Franks

unread,

Jul 5, 2018, 12:57:36 PM7/5/18

to DroidScript

Thanks, really appreciate the help!

Reply all

Reply to author

Forward