Utilize a single script to control various buttons

Question

Utilize a single script to control various buttons

At work, I have a soundboard that I like to use to prank my coworkers. The soundboard has multiple buttons, each playing a different sound when clicked. Currently, I have to write a separate script for each button, which has led to 47 scripts on the page. I am looking for a better solution where I can have one script that works for all the buttons.

<button onclick="javascript:toggleSound1();">I don't know what we're yelling about.</button>

Here is an example of one of the buttons:

<audio id="sound1" src="sounds/dontknowwhatwereyellingabout.wav"></audio>

And the script for the button:

<script type="text/javascript">
function toggleSound1() {
  var audioElem = document.getElementById('sound1');
  if (audioElem.paused)
    audioElem.play();
  else
    audioElem.pause(); 
    audioElem.currentTime = 0;
}
</script>

It occurred to me that if I could somehow define the 'sound1' on button press, I could use the same script for all the buttons. Currently, I have to define 'sound1', 'sound2', 'sound3', and so on, and create a new 'toggleSound' function for each of them.

javascript

Answer 1

Answer №1

One way to enhance toggleSound1 is by adding an argument:

function toggleSound(num) {
  var audioElem = document.getElementById('sound' + num); // concatenate the number to "sound" (sound1, sound2, etc.)
  if (audioElem.paused) {
    audioElem.play();
  } else {
    audioElem.pause();
  }
  audioElem.currentTime = 0;
}

When using this function, simply pass a number as an argument:

<button onclick="javascript:toggleSound(1);">I don't know what we're yelling about.</button>

Answer 2

One way to enhance toggleSound1 is by adding an argument:

function toggleSound(num) {
  var audioElem = document.getElementById('sound' + num); // concatenate the number to "sound" (sound1, sound2, etc.)
  if (audioElem.paused) {
    audioElem.play();
  } else {
    audioElem.pause();
  }
  audioElem.currentTime = 0;
}

When using this function, simply pass a number as an argument:

<button onclick="javascript:toggleSound(1);">I don't know what we're yelling about.</button>

Answer 3

Answer №2

It's a bit controversial, but I have some reservations about promoting this idea...

<button onclick="toggleVolume('volume1');">I'm uncertain what all the noise is about.</button>
<button onclick="toggleVolume('volume2');">Another type of sound</button>

<script type="text/javascript">
function toggleVolume(soundId) {
  var audioElement = document.getElementById(soundId);
  if (audioElement.paused)
    audioElement.play();
  else
    audioElement.pause(); audioElement.currentTime = 0;
}
</script>

Answer 4

It's a bit controversial, but I have some reservations about promoting this idea...

<button onclick="toggleVolume('volume1');">I'm uncertain what all the noise is about.</button>
<button onclick="toggleVolume('volume2');">Another type of sound</button>

<script type="text/javascript">
function toggleVolume(soundId) {
  var audioElement = document.getElementById(soundId);
  if (audioElement.paused)
    audioElement.play();
  else
    audioElement.pause(); audioElement.currentTime = 0;
}
</script>

Answer 5

Answer №3

One effective approach involves implementing event delegation and positioning the event handler at a higher level in the code.

<div onclick="handleAudio(e)">
  <button data-audio="1">I don't know what we're yelling about.</button>
  <button data-audio="2">Some other sound</button>
</div>

function handleAudio(e) {
  var audio = document.getElementById('sound' + e.target.dataset.audio);
  audio.play();
}

Answer 6

One effective approach involves implementing event delegation and positioning the event handler at a higher level in the code.

<div onclick="handleAudio(e)">
  <button data-audio="1">I don't know what we're yelling about.</button>
  <button data-audio="2">Some other sound</button>
</div>

function handleAudio(e) {
  var audio = document.getElementById('sound' + e.target.dataset.audio);
  audio.play();
}

Utilize a single script to control various buttons

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with updating React state? The useEffect hook runs when attempting to change the state, but it seems to have the

In order to utilize Next.js with pkg, you must enable one of the specified parser plugins: 'flow' or 'typescript'

Having trouble with TypeScript Library/SDK after installing my custom package, as the types are not being recognized

Collaborative gaming experience with three.js and socket.io

Instructions for activating column resizing in MUI DataGrid

Troubleshooting Async Issues in Node.js

Struggling to pass command line arguments to index.ts with yarn?

When working with Nuxt 3, the referrer header may sometimes return as undefined

Utilizing AngularJS to implement a Currency Filter on the output of a personalized filter

What strategies can be implemented to effectively share code between these two methods?

Unleashing the Array within a JavaScript Object

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

Obtain the elements within a rectangular region of a webpage

value assigned to ng-model does not update beyond its scope

Understanding the concept of Angular factories in Javascript

Customize the appearance of a shadow-root element

Executing the process of launching an entity and then promptly erasing it from the screen

Removing an object from the scene using three.js

Unshifting values in a JavaScript array only if they exist in another array

Is there a way for me to dynamically retrieve the input value produced by the Query?