Audio 기능

첫번째 시도

: public 폴더에 .mp3 파일을 넣었더니 

"Uncaught (in promise) DOMException: The element has no supported sources." 오류가 발생했다.

https://pythonq.com/so/javascript/678149

javascript - Chrome에서 Icecast 서버의 오디오가 재생되지 않음 - IT 툴 넷

 

두번째 시도

: 민영 튜터님이 src 폴더에 .mp3 파일만 담을 수 있는 폴더를 만들어서 넣고, import 해서 써야 한다고 말씀 해주셔서 수정했더니 해결 됐다.

import React, { useState, useEffect } from 'react'
import music3 from './music/보도블록 위에 내리는 비.MP3';
import music4 from './music/산 오솔길.MP3';
import music5 from './music/아스팔트.mp3';

const useMultiAudio = urls => {


  urls={music : [
    music3,
    music4,
    music5,
  ]}

  const [sources] = useState(
    urls.music.map(url => {
      return {
        url,
        audio: new Audio(url),
      }
    }),
  )

  const [players, setPlayers] = useState(
    urls.music.map(url => {
      return {
        url,
        playing: false,
      }
    }),
  )

  const toggle = targetIndex => () => {
    const newPlayers = [...players]
    const currentIndex = players.findIndex(p => p.playing === true)
    if (currentIndex !== -1 && currentIndex !== targetIndex) {
      newPlayers[currentIndex].playing = false
      newPlayers[targetIndex].playing = true
    } else if (currentIndex !== -1) {
      newPlayers[targetIndex].playing = false
    } else {
      newPlayers[targetIndex].playing = true
    }
    setPlayers(newPlayers)
  }

  useEffect(() => {
    sources.forEach((source, i) => {
      players[i].playing ? source.audio.play() : source.audio.pause()
    })
  }, [sources, players])

  useEffect(() => {
    sources.forEach((source, i) => {
      source.audio.addEventListener('ended', () => {
        const newPlayers = [...players]
        newPlayers[i].playing = false
        setPlayers(newPlayers)
      })
    })
    return () => {
      sources.forEach((source, i) => {
        source.audio.removeEventListener('ended', () => {
          const newPlayers = [...players]
          newPlayers[i].playing = false
          setPlayers(newPlayers)
        })
      })
    }
  }, [])

  return [players, toggle]
}

const Music = ({ urls }) => {
  const [players, toggle] = useMultiAudio(urls)

  return (
    <div>
      {players.map((player, i) => (
        <Player key={i} player={player} toggle={toggle(i)} />
      ))}
    </div>
  )
}

const Player = ({ player, toggle }) => (
  <div>
    <p>Stream URL: {player.url}</p>
    <button onClick={toggle}>{player.playing ? 'Pause' : 'Play'}</button>
  </div>
)


export default Music

 

import React, { useState, useEffect } from "react";
import music1 from './music/계곡의 비.MP3';
import music2 from './music/굵은비 번개.MP3';


const Music2 = () => {
  document.addEventListener("DOMContentLoaded", () => {
    // btn1을 눌렀을 때 sound1.mp3 재생
    document.querySelector(".btn1").addEventListener("click", function () {
      const audio1 = new Audio(music1);
      audio1.loop = false; // 반복재생하지 않음
      audio1.volume = 0.5; // 음량 설정
      audio1.play(); // sound1.mp3 재생

      console.log("1");
    });

    // btn2를 눌렀을 때 sound2.mp3 재생
    document.querySelector(".btn2").addEventListener("click", function () {
      const audio2 = new Audio(music2);
      audio2.loop = true; // 반복재생하지 않음
      audio2.volume = 0.5; // 음량 설정
      audio2.play(); // sound2.mp3 재생
      setTimeout(function () {
        // 1초 후 sound2.mp3 일시정지
        audio2.pause();
      }, 5000);

      console.log("2");
    });
  });

  return (
    <div>
      <button className="btn1">play sound1</button>
      <button className="btn2">play sound2</button>
    </div>
  );
};

export default Music2;

 

https://mjmjmj98.tistory.com/31

[javascript / 자바스크립트] audio play (오디오 재생) 방법, Audio 객체 예시