자바스크립트를 활용한 음악 및 오디오 서비스 개발

10 Sep 2023

javascript

음악 및 오디오 서비스는 많은 사람들에게 일상 생활의 일부가 되고 있습니다. 이러한 서비스를 개발하기 위해 자바스크립트는 매우 강력한 도구로 사용될 수 있습니다.

웹 오디오 API 활용하기

자바스크립트의 웹 오디오 API를 사용하면 웹 애플리케이션 내에서 음악을 재생하고 조작할 수 있습니다. 이를 통해 사용자에게 다양한 음악 체험을 제공할 수 있습니다.

// 음악 재생을 위한 오디오 엘리먼트 생성
const audio = new Audio();

// 음악 파일 경로 설정
audio.src = 'music.mp3';

// 재생 버튼 클릭 시 음악 재생
playButton.addEventListener('click', () => {
  audio.play();
});

// 일시정지 버튼 클릭 시 음악 일시정지
pauseButton.addEventListener('click', () => {
  audio.pause();
});

위 코드는 음악 파일을 재생하는 간단한 기능을 구현한 예시입니다. new Audio()를 통해 오디오 엘리먼트를 생성하고, src 속성을 통해 재생할 음악 파일 경로를 설정합니다. 재생 버튼 클릭 시 play() 메서드를 호출하여 음악을 재생하고, 일시정지 버튼 클릭 시 pause() 메서드를 호출하여 음악을 일시정지합니다.

원하는 음악 찾기

음악 서비스에서는 사용자가 원하는 음악을 찾을 수 있도록 검색 기능을 제공해야 합니다. 자바스크립트를 사용하여 검색 기능을 구현할 수 있습니다.

// 음악 목록 배열
const musicList = [
  { title: 'Song A', artist: 'Artist A' },
  { title: 'Song B', artist: 'Artist B' },
  { title: 'Song C', artist: 'Artist C' }
];

// 입력된 검색어로 음악을 찾는 함수
function searchMusic(keyword) {
  const results = musicList.filter(music => {
    // 음악 제목이나 아티스트 이름에 검색어가 포함되어 있는지 확인
    const titleMatch = music.title.toLowerCase().includes(keyword.toLowerCase());
    const artistMatch = music.artist.toLowerCase().includes(keyword.toLowerCase());
    
    return titleMatch || artistMatch;
  });
  
  return results;
}

// 검색어 입력 시 음악을 찾아서 결과를 출력
searchInput.addEventListener('input', (e) => {
  const keyword = e.target.value;
  const searchResults = searchMusic(keyword);
  
  renderResults(searchResults);
});

// 검색 결과를 화면에 출력하는 함수
function renderResults(results) {
  resultContainer.innerHTML = '';

  results.forEach(result => {
    const resultElement = document.createElement('div');
    resultElement.innerText = `${result.title} - ${result.artist}`;
    resultContainer.appendChild(resultElement);
  });
}

위 코드는 간단한 음악 목록을 배열로 정의하고, searchMusic() 함수를 통해 입력한 검색어와 일치하는 음악을 찾습니다. renderResults() 함수를 통해 검색 결과를 화면에 출력합니다. 검색어 입력 시 input 이벤트를 감지하여 검색 기능을 호출하고 결과를 출력합니다.

음악 재생목록 관리하기

음악 서비스에서 사용자는 자신만의 재생목록을 관리할 수 있어야 합니다. 자바스크립트를 사용하여 음악 재생목록을 구현할 수 있습니다.

// 음악 목록 배열
const musicList = [
  { title: 'Song A', artist: 'Artist A', url: 'songA.mp3' },
  { title: 'Song B', artist: 'Artist B', url: 'songB.mp3' },
  { title: 'Song C', artist: 'Artist C', url: 'songC.mp3' }
];

// 현재 재생 중인 음악 인덱스
let currentMusicIndex = 0;

// 재생목록에 음악 추가
function addMusicToPlaylist(music) {
  musicList.push(music);
}

// 이전 음악 재생
function playPrevious() {
  currentMusicIndex--;
  
  if (currentMusicIndex < 0) {
    currentMusicIndex = musicList.length - 1;
  }
  
  playCurrentMusic();
}

// 다음 음악 재생
function playNext() {
  currentMusicIndex++;
  
  if (currentMusicIndex >= musicList.length) {
    currentMusicIndex = 0;
  }
  
  playCurrentMusic();
}

// 현재 음악 재생
function playCurrentMusic() {
  const currentMusic = musicList[currentMusicIndex];
  
  audio.src = currentMusic.url;
  audio.play();
}

// 이전 버튼 클릭 시 이전 음악 재생
previousButton.addEventListener('click', playPrevious);

// 다음 버튼 클릭 시 다음 음악 재생
nextButton.addEventListener('click', playNext);

위 코드는 음악 재생목록을 배열로 정의하고, addMusicToPlaylist() 함수를 통해 음악을 재생목록에 추가합니다. playPrevious() 함수와 playNext() 함수를 통해 이전 음악과 다음 음악을 재생합니다. playCurrentMusic() 함수는 현재 재생 중인 음악을 재생합니다. 이전 버튼과 다음 버튼을 클릭 시 각각 playPrevious() 함수와 playNext() 함수를 호출하여 이전 음악과 다음 음악을 재생합니다.

자바스크립트를 활용한 음악 및 오디오 서비스 개발은 다양한 기능과 서비스를 구현할 수 있다는 것을 알 수 있습니다. 웹 오디오 API를 사용하여 음악을 재생하고 조작하거나, 검색 기능을 구현하거나, 음악 재생목록을 관리하는 등 다양한 기능을 구현할 수 있습니다. 이러한 자바스크립트의 장점을 활용하여 풍부한 음악 및 오디오 서비스를 개발해보세요!