[실전 프로젝트] 음원 재생 시 pause()가 동작 안하는 문제

실전 프로젝트에서 음원이 활성화 되면 음원이 재생 되고(play), 음원이 비활성화 되면 음원이 정지(pause) 되어야 해서 아래와 같이 코드를 작성 했습니다.

  // 음원 재생 여부
  const playBack = (status, asmrUrl) => {
    const url = document.getElementById(asmrUrl);
    const audio = new Audio(audioUrl1); // Audio 객체를 생성해서 음악을 재생한다.

    if (status === "play") {
      audio.loop = true; // 반복재생 여부
      audio.volume = 0.5; // 볼륨
      audio.play(); // 음원 재생
    } else if (status === "pause") {
      audio.pause(); // 음원 재생 중지
      audio.currentTime = 0;
    }
  };

 

문제 발생

.play()는 작동이 잘 되는 데! .pause()는 작동이 되지 않고 있습니다. 구글링 해봤을 때는.. 코드의 문제가 없는 것 같다...요

https://www.w3schools.com/jsref/met_audio_pause.asp

HTML DOM Audio pause() Method

https://wickedmagica.tistory.com/84

[JavaScript] Audio 객체를 이용한 음악 재생

 

해결 방법

  const select = async (asmrUrl) => {
    let playList = []; // 선택된 음원만 play 할 배열 // 😀

    if (play.includes(asmrUrl)) {
      // 비활성화
      let arr = [...play];
      arr = arr.filter((item) => {
        if (asmrUrl !== item) {
          return item;
        }
      });
      setPlay(arr);
      playList = [...arr]; // 😀

      // 선택한 음원 비활성화 style
      const deleteItem = document.getElementById(asmrUrl);
      deleteItem.style.backgroundColor = "gray";
    } else {
      // 활성화
      if (play.length > 2) {
        window.alert("음원은 3개까지만 담으실 수 있습니다.");
      } else {
        const arr = [...play, asmrUrl];
        setPlay(arr);
        playList = [...arr]; // 😀

        // 선택한 음원 활성화 style
        const selectItem = document.getElementById(asmrUrl);
        selectItem.style.backgroundColor = "#dddddd";
      }
    }

    // 배열에 있는 음원만 다시 재생.... // 😀
    playList.forEach((item) => {
      const audioPlayBack = new Audio(item);

      audioPlayBack.loop = true;
      audioPlayBack.volume = 0.5;
      audioPlayBack.play(); // 음원 재생
    });
  };

pause 안쓰고.... 활성화 시킨 asmrUrl을 배열에 담아서 해당 배열에 있는 요소들을 play 하기로 했다..