javascript - React js audio object not playing - The media resource was not suitable - Stack Overflow

admin管理员组

文章数量:1291029

I am making a piano app. I have a js function in a react ponent that plays the corresponding file to the note provided but the console always throws this error:

Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable.

And no sound is played. Here is the function:

var handleClick = (note) => {
    var path = "../../public/notes/" + note + ".mp3";
    var audio = new Audio(path);
    audio.play(); 
    console.log(audio);
    return audio.play();
  };

Also my file structure is:

App
 public
 node_modules
 src
   Components 
          Piano.js

I am making a piano app. I have a js function in a react ponent that plays the corresponding file to the note provided but the console always throws this error:

Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable.

And no sound is played. Here is the function:

var handleClick = (note) => {
    var path = "../../public/notes/" + note + ".mp3";
    var audio = new Audio(path);
    audio.play(); 
    console.log(audio);
    return audio.play();
  };

Also my file structure is:

App
 public
 node_modules
 src
   Components 
          Piano.js

• javascript
• html
• reactjs
• audio
• html5-audio

Share Improve this question Follow edited Feb 21, 2022 at 15:41 the Hutt 18.4k22 gold badges1818 silver badges4949 bronze badges asked Feb 13, 2022 at 12:38 ArezeAreze 9111 gold badge11 silver badge66 bronze badges 1

• can you share minimal reproducible on codesandbox? – the Hutt Commented Feb 21, 2022 at 15:42

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 2

Make sure your mp3 files are encoded as per these specifications. You can use any offline or online tool to check your file info.
Maybe you've just renamed the extension to mp3 of some other audio file. Can you share your file somewhere?

Also, don't load files when user clicks on piano keys. Try to preload all sound files like this:

// handle all promise rejections
window.onunhandledrejection = function(event) {
  console.log(`Reason: ${event.reason}`,
    ` Return value: ${event.returnValue}`
  );
};


let mouseDown = false;
let sounds = {
  a: "https://freesound/data/previews/448/448573_9311684-lq.mp3",
  b: "https://freesound/data/previews/448/448565_9311684-lq.mp3",
  c: "https://freesound/data/previews/448/448540_9311684-lq.mp3",
  d: "https://freesound/data/previews/448/448600_9311684-lq.mp3",
}

// preload audio files
let promises = [];
Object.keys(sounds).forEach(s => {
  promises.push(new Promise((resolve, reject) => {
    let url = sounds[s];
    sounds[s] = new Audio();
    sounds[s].addEventListener('canplaythrough', resolve, false);
    sounds[s].src = url;
  }));
});

Promise.all(promises).then(() => {
  stats.innerText = `All audio files loaded!  Drag mouse over the keys 

                本文标签：
                javascriptReact js audio object not playingThe media resource was not suitableStack Overflow

                        版权声明：本文标题：javascript - React js audio object not playing - The media resource was not suitable - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.betaflare.com/web/1741503887a2382205.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。