0

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 stop sound from playing when pressing a button to play another one.

<script type="text/javascript" charset="utf-8">
        $(function() {
            $("audio").removeAttr("controls").each(function(i, audioElement) {
                var audio = $(this);
                var that = this; //closure to keep reference to current audio tag
                $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
                    that.play();
                }));
            });
        });
    </script>

I hope someone understands that. Thanks in advance. There is also a PHP code to fetch the audio file automatically from the folder to the front end, probably unnecessary info for this problem.

Niko Piiroinen
  • 3
  • 1
  • 1
  • 5
  • Have you considered using the [Web Audio API](https://developer.mozilla.org/en/docs/Web/API/Web_Audio_API)? – le_m Apr 15 '17 at 20:32
  • @le_m No I haven't, since I really don't know even the basics of any coding language, I just happened to find this almost complete one with PHP fetcher already integrated to it. If someone were to offer me a different kind player that suits my needs, sure, I would change it. – Niko Piiroinen Apr 15 '17 at 20:41

5 Answers5

3

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 = new Audio();
    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>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio</title>
</head>
<body>
  <button value="https://www.gnu.org/music/FreeSWSong.ogg">Song #1</button>
  <button value="https://www.gnu.org/music/free-software-song-herzog.ogg">Song #2</button>
  <script src="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.

Badacadabra
  • 8,043
  • 7
  • 28
  • 49
3

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');

function stopAllAudio(){
 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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<audio id="audio-1"
  src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg">
</audio>
<audio id="audio-2"
  src="http://www.w3schools.com/html/horse.mp3">
</audio>

 <button id="play-1">
  play audio 1
 </button>
 <button id="play-2">
  play audio 2
 </button> 
</body>
</html>

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

azs06
  • 3,467
  • 2
  • 21
  • 26
1

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] of Object.entries(sounds)) {
    audios[title] = new Audio(url);
}

// Create board buttons:
let board = document.getElementById("board");
for (let title of Object.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 of Object.values(audios)) {
      audio.pause();
      audio.currentTime = 0;
    }
    // Play this audio element:
    audio.play();
  }
});
<div id="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:
function loadBuffer(url, cb) {
  var request = new XMLHttpRequest();
  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] of Object.entries(sounds)) {
  loadBuffer(url, buffer => buffers[title] = buffer);
}

// Create board buttons:
for (let title of Object.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();
  }
});
<div id="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).

Community
  • 1
  • 1
le_m
  • 19,302
  • 9
  • 64
  • 74
0

Below code may help others: 

var audioMap = new Map();
var rappers = document.querySelectorAll('.rapper');
rappers.forEach(function(rapper){
    audioMap.set(rapper, new Audio());
    rapper.addEventListener('click', function(){
        var audio = new Audio($(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;
            }
        });
    });
});
Saroar Hossain Limon
  • 75
  • 4
0

For the ones that don't use the audioTag in HTML5 and want to use only vanilla js this may help ya


var songplaying = null; //This is where we will store the current playing song

function playsong(song_name){
    //settings
    var playing = null;
    if(songplaying==null){ //If a song isn't stored that means that it's not playing and vice versa
        playing = false;
    }else{
        playing = true;
    }
    var dir = "./songs/"+song_name+".mp3"; //Here we get the directory of the song
    var song = new Audio(dir); //Making a new audio element
    if(!playing){ //This runs when no song is playing
        song.play();
        songplaying=song; //We save the current playing song
    }else{ //This runs when another song is already playing
        var song_alredyplaying = songplaying; //We get the audio element (song)
        song_alredyplaying.pause(); //Pause the song
        song.play(); //Then we play the new song
        songplaying=song; //Save the current playing song
    }
}


//Example
var playbtn = document.querySelector(".play");
playbtn.addEventListener('click', function(){
   playsong("the song name");
};
SwirX
  • 21
  • 7