Skip to content Skip to sidebar Skip to footer
Home / Javascript

Javascript To Stop Playing Sound When Another Starts

Post a Comment
So, I'm a complete amateur when it comes to coding, but I still like to fiddle around with it. I'm currently working on a html/jS/PHP based soundboard and I can't figure out how to

Solution 1:

What you could do, is before start playing a new audio pause all available audio on the page. Something like this.

var audioOne = document.querySelector('#audio-1');
var audioTwo = document.querySelector('#audio-2');

var allAudios = document.querySelectorAll('audio');

functionstopAllAudio(){
	allAudios.forEach(function(audio){
		audio.pause();
	});
}

document.querySelector('#play-1').addEventListener('click', function(){
	stopAllAudio();
	audioOne.play();
})
document.querySelector('#play-2').addEventListener('click', function(){
	stopAllAudio();
	audioTwo.play();
})
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JS Bin</title></head><body><audioid="audio-1"src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"></audio><audioid="audio-2"src="http://www.w3schools.com/html/horse.mp3"></audio><buttonid="play-1">
		play audio 1
	</button><buttonid="play-2">
		play audio 2
	</button></body></html>

Instead of adding audio using <audio> tag you could use HTMLAudioElement.

Solution 2:

This is not very difficult to do if you use HTML5 which introduced the HTMLAudioElement.

Here is the minimal code for what you are trying to do:

// Let's create a soundboard module ("sb")var sb = {
  song: null,
  init: function () {
    sb.song = newAudio();
    sb.listeners();
  },
  listeners: function () {
    $("button").click(sb.play);
  },
  play: function (e) {
    sb.song.src = e.target.value;
    sb.song.play();
  }
};

$(document).ready(sb.init);
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Audio</title></head><body><buttonvalue="https://www.gnu.org/music/FreeSWSong.ogg">Song #1</button><buttonvalue="https://www.gnu.org/music/free-software-song-herzog.ogg">Song #2</button><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></body></html>

You may also consider libraries like howler.js to help you in the development process.

Solution 3:

You can stop and reset an audio element by pausing it and setting its current time to 0. You would need to do this whenever a button is clicked. Example:

// Available sounds:const sounds = {
  "Bottle": "http://freewavesamples.com/files/Bottle.wav",
  "Bamboo": "http://freewavesamples.com/files/Bamboo.wav"
}

// Load audio elements:let audios = {};
for (let [title, url] ofObject.entries(sounds)) {
    audios[title] = newAudio(url);
}

// Create board buttons:let board = document.getElementById("board");
for (let title ofObject.keys(audios)) {
  let button = document.createElement("button");
  button.textContent = title;
  button.dataset["audio"] = title;
  board.appendChild(button);
}

// Handle board button clicks:
board.addEventListener("click", function(event) {
  let audio = audios[event.target.dataset["audio"]];
  if (audio) {
    // Pause and reset all audio elements:for (let audio ofObject.values(audios)) {
      audio.pause();
      audio.currentTime = 0;
    }
    // Play this audio element:
    audio.play();
  }
});
<divid="board"></div>

In case you want to leverage the full power of the Web Audio API, you would probably start building your soundboard similar to this:

// Load buffer from 'url' calling 'cb' on complete:functionloadBuffer(url, cb) {
  var request = newXMLHttpRequest();
  request.open('GET', url);
  request.responseType = 'arraybuffer';
  request.onload = () => context.decodeAudioData(request.response, cb);
  request.send();
}

// Available sounds:const sounds = {
  "Bottle": "url/to/bottle.wav",
  "Bamboo": "url/to/bamboo.wav"
};

let audioCtx = new (AudioContext || webkitAudioContext)(),
    board = document.getElementById("soundboard"),
    buffers = {},
    source;

// Load buffers:for (let [title, url] ofObject.entries(sounds)) {
  loadBuffer(url, buffer => buffers[title] = buffer);
}

// Create board buttons:for (let title ofObject.keys(sounds)) {
  let button = document.createElement("button");
  button.textContent = title;
  button.dataset["buffer"] = title;
  board.appendChild(button);
}

// Handle board button clicks:
board.addEventListener("click", function(event) {
  let buffer = buffers[event.target.dataset["buffer"]];
  if (buffer) {
    if (source) source.stop();
    source = audioCtx.createBufferSource();
    source.buffer = buffer;
    source.connect(audioCtx.destination);
    source.start();
  }
});
<divid="soundboard"></div>

Please note that the sound URLs given above must either be on the same domain or available under the same origin policy (see CORS headers).

Solution 4:

Below code may help others: 

var audioMap = newMap();
var rappers = document.querySelectorAll('.rapper');
rappers.forEach(function(rapper){
    audioMap.set(rapper, newAudio());
    rapper.addEventListener('click', function(){
        var audio = newAudio($(this).data('audio'));
        audio.play();
        audioMap.set(this, audio);
        var current = audioMap.get(this);
        // console.log('get', current);
        audioMap.forEach(function(audio){
            if( audio != current ){
                audio.pause();
                audio.currentTime = 0;
            }
        });
    });
});

Post a Comment for "Javascript To Stop Playing Sound When Another Starts"