Intermittently play a series of sound files, with only the final sound ringing out

Question

Intermittently play a series of sound files, with only the final sound ringing out

My goal is to create an app that plays a sound based on a number input. I have several short MP3 audio files for different numbers, and I want the app to play these sounds in sequence. However, when I try to do this, only the last sound corresponding to the final number is played, and I encounter an error message in the console:

"Uncaught (in promise) DOMException: The play() request was interrupted by a new load request."

I'm unsure of what I am missing or if it's even possible to achieve this. Any assistance would be greatly appreciated.

function playSound(note){

    var currentPlayer;
    var player = document.getElementById("player");

    var isPlaying = player.currentTime > 0 && !player.paused && !player.ended 
&& player.readyState > 2;


     if (!isPlaying){

        player.src = "sounds/"+note+".mp3";
        player.play();

     }else{
        player.pause();
        player.currentTime = 0;
        currentPlayer = player;

     }



}


//variable with numbers where each number should load a sound and play
var numString = "0934590042529689108538569377239609480456034083552";


for(i = 0; i < numString.length; i++){


    switch (parseInt(numString[i])){
        case 1:
            playSound("C"); 
            break;
        case 2:
            playSound("D");
            break;
        case 3:
            playSound("E");
            break;
        case 4:
            playSound("F");
            break;
        case 5:
            playSound("G");
            break;

        case 6:
            playSound("A");
            break;

        case 7:
            playSound("B");
            break;

        case 8:
            playSound("C2");
            break;

        case 9:
            playSound("D2");
            break;


        case 0:
            playSound("silence");
            break;


}

The Html:

<audio controls id="player" style="display: none">
    <source  src="#"></source>
</audio>

javascript html5-audio

Answer 1

Answer №1

Before you can load the next note, you must allow the first one to finish playing:

var index = 0;
var numString = "0934590042529689108538569377239609480456034083552";
var notes = ['silence', 'C', 'D', 'E', 'F', 'G', 'A', 'B', 'C2', 'D2'];
var player = document.getElementById('player');

function playNote() {
  if (index >= numString.length) {
    stop();
    return;
  }
  var note = notes[Number(numString[index])]; // convert number to corresponding note ('1' => 'C')
  if (!note) {
    stop();
    return;
  }
  index++;
  player.src = `sounds/${note}.mp3`;
  player.play();
}

function stop () {
  player.removeEventListener('ended', playNote);
}

player.addEventListener('ended', playNote);
playNote();

Edit:

I have replaced this with player in the playNote function. When playNote() is initially called, there is no this object referring to the player. It should have been playNote.call(player), but it currently works as is.

To minimize the load times between notes, you have two options:

Load sound files separately using multiple `audio` elements

Create a new Audio() for each note and load the sound file:

var numString = "0934590042529689108538569377239609480456034083552";
var notes = ['silence', 'C', 'D', 'E', 'F', 'G', 'A', 'B', 'C2', 'D2'];
var audios = {};
notes.forEach(note => {
  var audio = new Audio();
  audio.src = `sounds/${note}.mp3`;
  audios[note] = audio;
});

var currentAudio = null;

function playNote () {
  if (currentAudio) {
    currentAudio.removeEventListener('ended', playNote);
  }
  if (index >= numString.length) {
    return;
  }
  var note = notes[Number(numString[index])];
  if (!note) {
    return;
  }
  currentAudio = audios[note];
  index++;
  currentAudio.play();
  currentAudio.addEventListener('ended', playNote);
}

playNote();

Utilize the `AudioContext` API

The new Web Audio API is more intricate than new Audio() but offers greater capabilities. You can generate various sounds without needing every file on your server by leveraging the client's sound processing abilities.

Answer 2

Before you can load the next note, you must allow the first one to finish playing:

var index = 0;
var numString = "0934590042529689108538569377239609480456034083552";
var notes = ['silence', 'C', 'D', 'E', 'F', 'G', 'A', 'B', 'C2', 'D2'];
var player = document.getElementById('player');

function playNote() {
  if (index >= numString.length) {
    stop();
    return;
  }
  var note = notes[Number(numString[index])]; // convert number to corresponding note ('1' => 'C')
  if (!note) {
    stop();
    return;
  }
  index++;
  player.src = `sounds/${note}.mp3`;
  player.play();
}

function stop () {
  player.removeEventListener('ended', playNote);
}

player.addEventListener('ended', playNote);
playNote();

Edit:

I have replaced this with player in the playNote function. When playNote() is initially called, there is no this object referring to the player. It should have been playNote.call(player), but it currently works as is.

To minimize the load times between notes, you have two options:

Load sound files separately using multiple `audio` elements

Create a new Audio() for each note and load the sound file:

var numString = "0934590042529689108538569377239609480456034083552";
var notes = ['silence', 'C', 'D', 'E', 'F', 'G', 'A', 'B', 'C2', 'D2'];
var audios = {};
notes.forEach(note => {
  var audio = new Audio();
  audio.src = `sounds/${note}.mp3`;
  audios[note] = audio;
});

var currentAudio = null;

function playNote () {
  if (currentAudio) {
    currentAudio.removeEventListener('ended', playNote);
  }
  if (index >= numString.length) {
    return;
  }
  var note = notes[Number(numString[index])];
  if (!note) {
    return;
  }
  currentAudio = audios[note];
  index++;
  currentAudio.play();
  currentAudio.addEventListener('ended', playNote);
}

playNote();

Utilize the `AudioContext` API

The new Web Audio API is more intricate than new Audio() but offers greater capabilities. You can generate various sounds without needing every file on your server by leveraging the client's sound processing abilities.

Intermittently play a series of sound files, with only the final sound ringing out

Answer №1

Edit:

Load sound files separately using multiple `audio` elements

Utilize the `AudioContext` API

Similar questions

Utilizing Express.js for setting up routes with a default path

Guide to integrating various HTML files into a single HTML file with the help of Vue.js

Trigger a function when a button is clicked

Is it acceptable to include the bundled main.js file in the gitignore for a HUGO project?

Ways to simulate a class instance that is being received from a file with a different class instance

Unable to access the current state within an asynchronous function in React.js

JavaScript change the object into a string

What is the best way to create a function that automatically resumes audio playback 3 seconds after the pause button is clicked?

Leverage variable as an expression when utilizing ng-include

What additional requirements are needed for Rails and remote AJAX with the "true" setting?

Manipulate Angular tabs by utilizing dropdown selection

"Ensuring Contact Information is Unique: A Guide to Checking for Existing Email or Phone Numbers in

The Controller is encountering an empty child array when attempting to JSON.stringify it

The jQuery keyup event initiates multiple times, increasing exponentially with each trigger

List of Map Pins on Google Maps

Selection menu for hierarchical reporting information

Should tabs be closed or redirected after successful authentication with Google?

avoidable constructor in a react component

What is the best way to include additional text in a dropdown menu?

Tips for transforming promise function into rxjs Observables in Angular 10

Intermittently play a series of sound files, with only the final sound ringing out

Answer №1

Edit:

Load sound files separately using multiple audio elements

Utilize the AudioContext API

Similar questions

Utilizing Express.js for setting up routes with a default path

Guide to integrating various HTML files into a single HTML file with the help of Vue.js

Trigger a function when a button is clicked

Is it acceptable to include the bundled main.js file in the gitignore for a HUGO project?

Ways to simulate a class instance that is being received from a file with a different class instance

Unable to access the current state within an asynchronous function in React.js

JavaScript change the object into a string

What is the best way to create a function that automatically resumes audio playback 3 seconds after the pause button is clicked?

Leverage variable as an expression when utilizing ng-include

What additional requirements are needed for Rails and remote AJAX with the "true" setting?

Manipulate Angular tabs by utilizing dropdown selection

"Ensuring Contact Information is Unique: A Guide to Checking for Existing Email or Phone Numbers in

The Controller is encountering an empty child array when attempting to JSON.stringify it

The jQuery keyup event initiates multiple times, increasing exponentially with each trigger

List of Map Pins on Google Maps

Selection menu for hierarchical reporting information

Should tabs be closed or redirected after successful authentication with Google?

avoidable constructor in a react component

What is the best way to include additional text in a dropdown menu?

Tips for transforming promise function into rxjs Observables in Angular 10

Load sound files separately using multiple `audio` elements

Utilize the `AudioContext` API