Is it possible to have a button that can toggle the playing state of audio

Question

I'm creating a webpage were I want people to be able to press a button on their keyboard to play a sound and I have gotten this part to work by googling around a bit. Now however I want an on/off switch on the page that can turn the sound from the keyboard presses off so that people who don't want the keypresses to make a sound can have that option, is this possible?

Right now I'm using this JavaScript and HTML to play a sound whenever a button is pressed (A in this example):

JavaScript:

$(document).keydown(function(e){
    if (e.keyCode == 65) { 
        document.getElementById('A').play();
        return false;
    }
});

HTML:

<audio id="A" src="A.ogg"></audio>

Why disable the whole script? Why not just add another condition to your `if` statement and have some code that toggles that flag? — Mike Cluck, Nov 07 '16 at 21:52
I'm sorry but I'm very new to javascript and I found this script online and just copy/pasted it. I honestly don't understand what you mean or how I would do it, could you please elaborate? — Statzer x, Nov 07 '16 at 21:57
@Statzerx You probably shouldn't ask questions about you haven't first made an effort to understand — Luke Taylor, Nov 07 '16 at 22:03

Scott Marcus · Answer 1 · 2016-11-07T22:17:45.700

2

Just set a boolean flag to track the playing state and check the flag to do the right operation:

Here's the long version:

var playing = false;
var playsound = function(e){
    if (e.keyCode === 65 && !playing) { 
        document.getElementById('A').play();
        playing = true;
        return false;
    } else if(e.keyCode === 65 && playing){
        document.getElementById('A').pause();
        playing = false;
        return false;
    }
}

Or, a more condensed version:

var playing = false;
var a = document.getElementById('A');

document.addEventListener("keydown", function(e){
    if (e.keyCode === 65){
       (!playing) ? a.play() : a.pause();
       playing = !playing;
       console.log("Sound is: " + playing);
       return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<audio id="A" src="" controls></audio>

edited Nov 07 '16 at 22:17

answered Nov 07 '16 at 21:56

Scott Marcus

64,069
6
49
71

Sorry but maybe I don't understand what I'm supposed to do with the code or I was unclear in my question (I've edited the question now so that it makes more sense). If I replace the JavaScript code with this the a button just works once then it stops working. What I'm looking for is an on/off switch that I can put on the page that can turn the keyboard press sounds on/off. Once again sorry I should have been more clear but thanks anyway for the quick answer! – Statzer x Nov 07 '16 at 22:08
@Statzerx See the code snippet in my answer. This works as you describe. – Scott Marcus Nov 07 '16 at 22:18
Almost! Instead of the A key turning the sound on/off I'd like a switch like this one: https://proto.io/freebies/onoff/ to do it instead so that when it's tuned on the buttons make a sound and when it's off they don't. – Statzer x Nov 07 '16 at 22:37
@Statzerx That is a custom artifact but it doesn't change the code or logic I've shown. You would need to add whatever element you want and then instead of `keypress` on the `document`, you'd use `click` of the element. – Scott Marcus Nov 07 '16 at 22:41

score 0 · Answer 2 · answered Nov 07 '16 at 21:57

You could remove the listener and re-add it on the button click

var playsound = function(e){
    if (e.keyCode == 65) { 
        document.getElementById('A').play();
        return false;
    }
}
var soundEnabled = true;

$("body").on("keydown", playsound);

$(#button).click(function(){
  soundEnabled = !soundEnabled;
  if(soundEnabled){
    $("body").on("keydown", playsound);
  }else{
    $("body").off("keydown", playsound);
  }
});

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I've finally found a solution after googling around for everything I could imagine and finally I found this answer on another question someone else asked on this site! So this is how I did it using that answer:

HTML

<audio id="A" src="A.ogg"></audio>

<button onclick="document.getElementById('A').muted=!document.getElementById('A').muted">Mute/ Unmute</button>

Javascript

$(document).keydown(function(e){
    if (e.keyCode == 65) { 
        document.getElementById('A').play();
        return false;
    }
});

So with this method I didn't have to change the Javascript at all and it still does exactly what I wanted it to do!

Thanks to everyone who tried to help but as this is my first time ever using javascript I didn't understand what I was supposed to do with your answers. This answer that I found also made a lot of sense to me as I do know at least a little about how HTML works ... But yeah, thanks anyway!

Is it possible to have a button that can toggle the playing state of audio

3 Answers3