[Javascript] blob으로 저장된 미디어파일 재생처리

지난 시간에 firebase storage에 저장된 음악파일을 blob 형식으로 받아 indexdDB에 저장하는 기능을 구현했었다. 해당내용은 아래 포스트를 통해 확인할 수 있다.

 

https://ddochea.tistory.com/86

[javascript] 브라우저의 indexedDB 및 WebSQL을 손쉽게 사용할 수 있는 localForage 라이브러리

파일을 받았으니 이번엔 재생을 다뤄볼 차례이다. blob 형식을 재생하는 방법은 의외로 쉽게 찾을 수 있었다.

import React, { useEffect, useRef, useState } from "react";
import firebase from "firebase/app";
import localforage from "localforage";
import "firebase/storage";

import logo from './logo.svg';
import './App.css';

firebase.initializeApp({
  // firebase 프로젝트 config 설정영역
})

function App() {
  const [srcValue, setSrcValue] = useState('');
  
  function play() {
    localforage.getItem("test", (err, value) => {
      console.log(err);
      console.log(value);
      const url = URL.createObjectURL(value.file);
      setSrcValue(url);
    })
  }

  function getMusicFile() {
    const storage = firebase.storage();
    var storageRef = storage.ref();
    storageRef.child('음악파일.mp4').getDownloadURL().then((url) => {
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function(event) {
        const blob = xhr.response;
        localforage.setItem("test", {
          "name":"음악파일.mp4",
          "file": blob});
      };
      console.log(url);
      xhr.open('GET', url);
      xhr.send();
    });
  }
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <video src={srcValue} autoPlay={true}>
        </video>
        <button onClick={getMusicFile}>getStorage</button>
        <button onClick={play}>PlaySavedFile</button>
      </header>
    </div>
  );
}

export default App;

 

기존 소스에서 play함수 및 해당 함수를 실행할 수 있는 버튼과 State를 추가했다. 버튼을 누르면 indexedDB에 저장된 음악 Blob을 가져와 URL로 바꾼 뒤 video 태그의 src 값에 바인딩한다.

 

결과화면은 저작권 문제 소지가 있어 올리지 못하지만 화면과 함께 음악이 들리는 것을 확인할 수 있었다.

인터넷이 끊어진 환경에서도 동작여부를 확인해야 하는데 해당 부분은 호스팅 서비스가 필요할 듯 싶다.