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

The type of jQuery selector

What is the solution to the question: "Hey there, time traveler. We are currently in an era where CSS prefixes are no longer necessary, thanks to the advances in prefix-less CSS

A JavaScript pop-up box with two windows

Maintaining a reliable and efficient way to update the userlist in a chatroom using PHP, AJAX, and SQL

The Node.js POST request is unexpectedly returning 'undefined'

Identifying Master Page Controls Post-Rendering

Having difficulty parsing or assigning JSON response: The response is being interpreted as [object Object]

Observing changes to attributes in AngularJS is a useful feature that allows for

Error: The function `push` cannot be used on the variable `result` (TypeError)

Repeating the setTimeout function in a loop

Is there a way to efficiently line up and run several promises simultaneously while using just one callback function?

When transmitting a variable from JavaScript to PHP using Ajax, the data appears to be missing

Utilize the Material UI feature to call the function

Best practices for building an Ember frontend and Node backend application

Converting Cookies to Numeric Values in JavaScript: A Step-by-Step Guide

Preventing the insertion of a line break when using Shift + Enter in Vuejs

Looking for a way to manipulate the items in my cart by adding, removing, increasing quantity, and adjusting prices accordingly. Created by Telmo

Using Jquery to change an id with the .attr method may not always produce the desired results

The Console.log() function displays the current state and value of a promise object within the Q library

The IIS URL rewrite is causing issues with the rewriting of CSS and JS files

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

The type of jQuery selector

What is the solution to the question: "Hey there, time traveler. We are currently in an era where CSS prefixes are no longer necessary, thanks to the advances in prefix-less CSS

A JavaScript pop-up box with two windows

Maintaining a reliable and efficient way to update the userlist in a chatroom using PHP, AJAX, and SQL

The Node.js POST request is unexpectedly returning 'undefined'

Identifying Master Page Controls Post-Rendering

Having difficulty parsing or assigning JSON response: The response is being interpreted as [object Object]

Observing changes to attributes in AngularJS is a useful feature that allows for

Error: The function `push` cannot be used on the variable `result` (TypeError)

Repeating the setTimeout function in a loop

Is there a way to efficiently line up and run several promises simultaneously while using just one callback function?

When transmitting a variable from JavaScript to PHP using Ajax, the data appears to be missing

Utilize the Material UI feature to call the function

Best practices for building an Ember frontend and Node backend application

Converting Cookies to Numeric Values in JavaScript: A Step-by-Step Guide

Preventing the insertion of a line break when using Shift + Enter in Vuejs

Looking for a way to manipulate the items in my cart by adding, removing, increasing quantity, and adjusting prices accordingly. Created by Telmo

Using Jquery to change an id with the .attr method may not always produce the desired results

The Console.log() function displays the current state and value of a promise object within the Q library

The IIS URL rewrite is causing issues with the rewriting of CSS and JS files

Load sound files separately using multiple `audio` elements

Utilize the `AudioContext` API