react 오디오 재생 에러 : Uncaught (in promise) DOMException: The element has no supported sources.

 

 

✔️ 에러 코드

Uncaught (in promise) DOMException: The element has no supported sources.

 

 

 

✔️ 에러가 나온 이유

오디오 파일이 로드 중 상태에서, 로드가 최적화되기 전 재생을 실행하는 것이 문제가 되는 것 같다. 😅

그래서 오디오 파일을 완전히 불러온 후 재생하도록 코드를 수정했다. 

 

👇에러코드 👇

import React from "react";

const AudioPlayer = () => {
  let audio = new Audio("../../assets/audio/train_horn.mp3");
  const start = () => {
    audio.play();
  };

  return (
    <div>
      <button onClick={start}>start</button>
    </div>
  );
};

export default AudioPlayer;

---

👇에러  수정 코드 👇

import React from "react";
import sound from "../../assets/audio/train_horn.mp3";

const AudioPlayer = () => {
  let audio = new Audio(sound);
  const start = () => {
    audio.play();
  };

  return (
    <div>
      <button onClick={start}>start</button>
    </div>
  );
};

export default AudioPlayer;

 

 

참고

https://github.com/codingeverybody/codingyahac/issues/577

오디오를 재생하는 버튼에 문제가 발생합니다. · Issue #577 · codingeverybody/codingyahac

 

https://stackoverflow.com/questions/37674223/domexception-failed-to-load-because-no-supported-source-was-found

DOMException: Failed to load because no supported source was found

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓