タグ: HEVC

動画関連/気になること

動画の中の「あの曲」が気になったので、HTMLプレイヤーを自作してShazamで特定してみた

by さくら / 0件のコメント
自作HTMLプレイヤーとShazamで曲名を特定する記事のOGPバナー、シンプル版

スマートフォンで撮った動画を見返していて、「あ、この曲なんだっけ……」と気になったことはありませんか。背後に流れているBGMのタイトルが気になって検索しても、断片的な歌詞やメロディだけでは思い出せない。今回はその「曲名がわからない問題」を、Claudeに自作プレイヤーを作ってもらい、Shazamと組み合わせることで解決した記録です。

きっかけ：動画ファイル（.mov）が再生しづらかった

問題の動画は、iPhoneで撮影した .mov 形式のファイルでした。.mov 自体は珍しい形式ではありませんが、iPhoneで撮影された動画はHEVC（H.265）という映像コーデックで圧縮されていることが多く、ブラウザによっては再生できないケースがあります。HEVCへの対応状況はブラウザの種類だけでなく、OS側のコーデックサポート状況にも左右されるため、「このブラウザなら必ず再生できる」と一概には言えない点が厄介でした。

「ローカルの動画ファイルを、手元のブラウザで素早く確認したい」というだけなのに、対応コーデックの違いで手間がかかる――これが最初の小さな壁でした。

解決策：シンプルな自作プレイヤーをHTMLで作る

そこで、ブラウザ上で動画ファイルを選んで再生できるだけの、ごくシンプルなHTMLファイルを作成しました。ポイントは次の2点です。

  • ファイル選択方式：あらかじめ動画ファイルを特定のフォルダに置く必要がなく、「ファイルを選択」ボタンから好きなファイルを選べるようにしました。汎用性を重視し、パス指定が不要な設計です。
  • ローカル完結：選んだファイルはブラウザ内でObject URLとして読み込まれるだけで、外部サーバーへ送信されることはありません。

完成したコードは以下の通りです（その後、.mp3や.mp4にも対応させた最終版です）。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>動画・音声ファイル再生プレイヤー</title>
<style>
  body {
    font-family: -apple-system, "Hiragino Sans", "Meiryo", sans-serif;
    background: #1c1c1e;
    color: #f5f5f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px;
    margin: 0;
    min-height: 100vh;
  }
  h1 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 24px;
  }
  .file-input-wrapper {
    margin-bottom: 24px;
  }
  input[type="file"] {
    color: #f5f5f7;
    background: #2c2c2e;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.95rem;
  }
  video {
    max-width: 90vw;
    max-height: 70vh;
    background: #000;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    display: none;
  }
  audio {
    width: 90vw;
    max-width: 480px;
    margin-top: 12px;
    display: none;
  }
  .audio-icon {
    font-size: 4rem;
    margin-top: 20px;
    display: none;
  }
  .filename {
    margin-top: 12px;
    font-size: 0.85rem;
    color: #a1a1a6;
  }
  .note {
    margin-top: 32px;
    font-size: 0.8rem;
    color: #6e6e73;
    max-width: 480px;
    text-align: center;
    line-height: 1.5;
  }
</style>
</head>
<body>

  <h1>動画・音声ファイル再生プレイヤー（.mov / .mp3 対応）</h1>

  <div class="file-input-wrapper">
    <input type="file" id="fileInput" accept="video/*,audio/*,.mov,.mp3">
  </div>

  <div class="audio-icon" id="audioIcon">🎵</div>
  <video id="videoPlayer" controls></video>
  <audio id="audioPlayer" controls></audio>
  <div class="filename" id="filenameDisplay"></div>

  <div class="note">
    「ファイルを選択」ボタンからお手元の .mov や .mp3 ファイルを選んでください。<br>
    ファイルはブラウザ内でのみ読み込まれ、外部へ送信・保存されません。<br>
    動画ファイルがHEVC(H.265)コーデックの場合、ブラウザやOSの対応状況によっては再生できないことがあります。
  </div>

<script>
  const fileInput = document.getElementById('fileInput');
  const video = document.getElementById('videoPlayer');
  const audio = document.getElementById('audioPlayer');
  const audioIcon = document.getElementById('audioIcon');
  const filenameDisplay = document.getElementById('filenameDisplay');
  let currentUrl = null;

  fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    if (currentUrl) {
      URL.revokeObjectURL(currentUrl);
    }

    currentUrl = URL.createObjectURL(file);
    filenameDisplay.textContent = file.name;

    const isAudio = file.type.startsWith('audio') || /\.mp3$/i.test(file.name);

    if (isAudio) {
      video.style.display = 'none';
      video.removeAttribute('src');
      audio.src = currentUrl;
      audio.style.display = 'block';
      audioIcon.style.display = 'block';
      audio.play().catch(() => {});
    } else {
      audio.style.display = 'none';
      audioIcon.style.display = 'none';
      audio.removeAttribute('src');
      video.src = currentUrl;
      video.style.display = 'block';
      video.play().catch(() => {});
    }
  });
</script>

</body>
</html>

使い方はとても簡単です。このHTMLファイルをダブルクリックしてブラウザで開き、「ファイルを選択」から該当のファイルを選ぶだけで再生が始まります。

Shazamプラグインで曲名を特定

動画をブラウザで再生できるようになったところで、ブラウザ拡張機能の「Shazam」を使い、再生中の音声を聴かせてみました。結果は一瞬。曲名とアーティスト名がすぐに表示され、長年気になっていた疑問が解決しました。

動画編集ソフトを立ち上げたり、音声を抜き出したりする手間は一切不要で、「ブラウザで再生→拡張機能が自動で聴き取る」というだけのシンプルな流れで完了したのが印象的でした。

ここで一点補足です。Shazamのブラウザ拡張機能はChrome向けに提供されているもので、Chromeウェブストアからインストールします（Safariや他のブラウザでは同じ拡張機能は使えません）。今回は実際にChromeでHEVC（H.265）形式の.movファイルを再生し、そのままShazamに聴き取らせることができましたが、HEVC再生への対応状況は環境によって差があるため、もしChromeで動画が再生されない場合は、後述のように.mp4へ変換するなど別の手段を検討する必要があります。

つまり、「自作プレイヤーでの再生」と「Shazamでの曲名特定」を同じ流れで行うには、基本的にChromeを使うのが前提になります。

mp4・mp3にも対応させた

最初は .mov 専用に作ったプレイヤーでしたが、せっかくなので汎用性を高めることにしました。具体的には、選択したファイルの種類（MIMEタイプや拡張子）を見て、

  • 動画ファイル（.mov、.mp4 など）→ <video> タグで再生
  • 音声ファイル（.mp3 など）→ <audio> タグで再生（音符アイコンを表示）

を自動で切り替えるようにしました。動画かどうかを毎回意識しなくても、同じ画面でファイルを選ぶだけで適切に再生されます。実際に .mp4 ファイルでも問題なく動作することを確認できました。

まとめ

「動画の中の曲名が気になる」という、ちょっとしたきっかけから始まった今回の取り組みでしたが、

  1. ブラウザのコーデック対応状況を、自作のシンプルなHTMLプレイヤーで吸収（パス指定不要のファイル選択方式）
  2. Chrome＋Shazamのブラウザ拡張機能で曲名をその場で特定
  3. 動画だけでなく音声ファイルにも対応させて汎用性を向上

という流れで、想像以上にスムーズに解決できました。ローカルにある動画・音声ファイルをサーバーにアップロードすることなく、その場でブラウザだけで確認・再生できる手軽さは、ちょっとした調べ物のときに地味に便利です。今回のコードはご自由にお使いいただけますので、似たような場面で気になる曲が出てきたら、ぜひ試してみてください。

動画作成には自信があります！

PAGE TOP