スマートフォンで撮った動画を見返していて、「あ、この曲なんだっけ……」と気になったことはありませんか。背後に流れている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 ファイルでも問題なく動作することを確認できました。
まとめ
「動画の中の曲名が気になる」という、ちょっとしたきっかけから始まった今回の取り組みでしたが、
- ブラウザのコーデック対応状況を、自作のシンプルなHTMLプレイヤーで吸収（パス指定不要のファイル選択方式）
- Chrome＋Shazamのブラウザ拡張機能で曲名をその場で特定
- 動画だけでなく音声ファイルにも対応させて汎用性を向上
という流れで、想像以上にスムーズに解決できました。ローカルにある動画・音声ファイルをサーバーにアップロードすることなく、その場でブラウザだけで確認・再生できる手軽さは、ちょっとした調べ物のときに地味に便利です。今回のコードはご自由にお使いいただけますので、似たような場面で気になる曲が出てきたら、ぜひ試してみてください。
動画作成には自信があります！
