[javascript] Universal Viewer를 통한 오디오 파일 재생 기능

30 Nov 2023

javascript

이 포스트에서는 Universal Viewer 라이브러리를 사용하여 웹 페이지에 오디오 파일을 재생하는 기능을 구현하는 방법을 알아보겠습니다.

Universal Viewer란?

Universal Viewer는 웹에서 다양한 형식의 파일을 표시하고 탐색할 수 있는 오픈 소스 라이브러리입니다. 이미지, 동영상, PDF 및 오디오 파일 등을 제공하는 다양한 형태의 미디어를 표시하기 위해 사용됩니다.

사용 준비

먼저, Universal Viewer를 프로젝트에 추가해야 합니다. 아래의 스크립트 태그를 HTML 파일의 <head> 태그 안에 추가하면 됩니다.

<script src="https://unpkg.com/universalviewer@3.0.0/umd/universalviewer.min.js"></script>

이제 Universal Viewer를 통해 오디오 파일을 재생할 준비가 완료되었습니다.

오디오 파일 재생하기

HTML 마크업

오디오 파일을 재생하기 위해 HTML 마크업을 작성해야 합니다. 일반적으로 아래와 같은 형태로 작성합니다.

<audio controls>
  <source src="audio_file.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

위의 예제에서 src 속성은 오디오 파일의 경로를 지정하며, type 속성은 오디오 파일의 형식을 정의합니다. 이 예제는 MP3 파일을 재생하는 것을 가정하고 있습니다.

JavaScript 초기화

오디오 파일을 재생하기 위해 JavaScript로 Universal Viewer를 초기화해야 합니다. 아래의 코드를 참고하여 초기화하는 방법을 알아봅시다.

var viewer = new UniversalViewer({
  controlsEnabled: false, // Universal Viewer 컨트롤을 숨깁니다.
  element: document.getElementById('audio-container'), // 오디오 재생을 위한 컨테이너 요소를 지정합니다.
  manifest: {
    sequences: [{
      canvases: [{
        label: "Audio",
        thumbnail: {
          "@id": "audio_file.mp3",
          format: "audio/mp3",
        },
      }],
    }],
  },
});

위의 코드에서 element 속성은 오디오 재생을 위한 컨테이너 요소를 지정하는 부분입니다. 컨테이너 요소는 <div> 등의 HTML 엘리먼트를 사용할 수 있습니다.

CSS 스타일링

마지막으로, 오디오 플레이어의 스타일링을 위해 CSS를 적용할 수 있습니다. Universal Viewer는 uv.css 파일을 통해 기본 스타일을 제공합니다. 아래의 코드를 사용하여 CSS를 로드합니다.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/universalviewer@3.0.0/umd/uv.css">

결과 확인하기

이제 오디오 파일 재생 기능을 확인해보세요. Universal Viewer를 초기화한 JavaScript 코드와 오디오 파일의 HTML 마크업을 작성한 후, 웹 페이지를 열어 오디오 파일이 잘 표시되고 재생되는지 확인할 수 있습니다.

결론

Universal Viewer를 사용하여 웹 페이지에서 오디오 파일을 재생하는 기능을 구현하는 방법을 알아보았습니다. Universal Viewer는 다양한 미디어 형식을 제공하므로, 이미지, 동영상, PDF 등과 함께 사용하여 다양한 컨텐츠를 웹 페이지에서 표시할 수 있습니다.

더 자세한 내용은 Universal Viewer 공식 문서를 참고하시기 바랍니다.