[실전 프로젝트] 주제 회의 / UX Flow

프로젝트를 또 갈아 엎게 되었다. 대표님이 기존 프로젝트의 기능을 기간 안에 구현 할 수 있겠냐라는 피드백을 주셨고,

수요가 없을 것 같다는 의견들이 나와서... 

 

오늘 한 일

1. 프로젝트 주제 회의 (55시간 째...)

2. 연애 고민 투표 플랫폼으로 주제 선정

3. 디자이너분들이 마음에 안드신다고 하셔서 다시 회의 시작

: 잠을 잘 못자는 사람들을 위한 서비스를 제공하는 플랫폼

https://play.google.com/store/apps/details?id=com.scatterlab.peace&hl=en_US&gl=US 

블림프 (BLIMP) - 소리로 떠나는 휴식 여행 - Apps on Google Play

https://clova.ai/voice

CLOVA Voice - 네이버 클로바

---

새로운 기능 - audio 기능을 넣고 싶어서 .mp3 파일을 다운로드 받아서 실행 할 수 있도록 도전 해보았다.

 

첫번째 시도

: 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 해서 써야 한다고 말씀 해주셔서 수정했더니 해결 됐다.

// version 1

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

// version 2

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;

---

결론

: 회의 → 주제 결정 → 회의 → 주제 결정 (수면 관리 플랫폼) → 오디오 기능 되는 지 테스트