実現したいこと
web画面で音声を録音して、QuickTimeで再生できるwavファイルを作成したいです。
発生している問題・分からないこと
ファイル自体は作成できるのですが、QuickTimeで再生をしようとすると「互換性がありません。」と表示されます。
メディアプレイヤーでは再生が可能です。
エラーメッセージ
error
1QuickTimeから「互換性がありません。」と表示されます。
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3 4<head>5 <title>Save audio data</title>6</head>7 8<body>9 <a id="download" style="display:none;">Download</a>10 <button id="record">Record</button>11 <button id="stop" disabled>Stop</button>12 <script>13 // Define global variables14 let audioContext, mediaRecorder, recordedBlobs;15 16 const downloadLink = document.getElementById('download');17 const recordButton = document.getElementById('record');18 const stopButton = document.getElementById('stop');19 20 recordButton.addEventListener('click', startRecording);21 stopButton.addEventListener('click', stopRecording);22 23 async function startRecording() {24 recordedBlobs = [];25 try {26 const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false});27 mediaRecorder = new MediaRecorder(stream);28 29 mediaRecorder.onstop = (event) => {30 const blob = new Blob(recordedBlobs, {type: 'audio/wav'});31 const url = URL.createObjectURL(blob);32 downloadLink.href = url;33 downloadLink.download = 'test.wav';34 downloadLink.style.display = 'block';35 };36 37 mediaRecorder.ondataavailable = (event) => {38 if (event.data && event.data.size > 0) {39 recordedBlobs.push(event.data);40 }41 };42 43 mediaRecorder.start();44 console.log('MediaRecorder started', mediaRecorder);45 recordButton.disabled = true;46 stopButton.disabled = false;47 } catch (err) {48 console.error('Failed to start recording', err);49 }50 }51 52 function stopRecording() {53 mediaRecorder.stop();54 console.log('Recorded Blobs: ', recordedBlobs);55 recordButton.disabled = false;56 stopButton.disabled = true;57 }58 </script>59</body>60 61</html>
試したこと・調べたこと
上記の詳細・結果
5年ほど前の記事で、ScriptProcessorを利用してる記事を見つけました。
それを利用するとQuickTimeが認識するwavファイルを作成することができました。
補足
特になし
0 コメント