重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

いつもお世話になっています。

jQueryで、ウェブ上で演奏できる鍵盤アプリを作っています。

このアプリに録音、再生機能を搭載しようとしているのですが、なかなか思った通りに動きません。

アンドロイドではうまく録音、再生できるようになったのですが、iPhoneではうまくいきません。

iPhoneでは、録音した音声を再生しようとすると<audio>コントロール上にエラーと表示され、再生できません。

原因を探しやすくするために、次の通り必要最小限のコードを書きおろしました。

const 音声 = new AudioContext,
発振器 = 音声.createOscillator(),
変換 = 音声.createMediaStreamDestination(),
録音機 = new MediaRecorder(変換.stream),
再生機 = $('audio')[0]
発振器.connect(変換)
録音機.ondataavailable = e => 録音機.記憶.push(e.data)
録音機.onstop = () => 再生機.src = URL.createObjectURL(new Blob(録音機.記憶))
$('#録音').click(() => {
発振器.start()
録音機.記憶 = []
録音機.start()
})
$('#停止').click(() => {
録音機.stop()
発振器.stop()
})

ページ上には、<audio>コントロール、録音ボタン、停止ボタンがあります。
録音ボタンを押すと、OscillatorNodeとMediaRecorderが開始され、
停止ボタンを押すと、その両者が停止し、録音した音声が<audio>コントロールで再生できるようになるという仕様です。

コード中の、Blob()の第二引数に{type: 'audio/mp3'}を渡すとiPhoneで再生できるようになるのですが、今度はPCで再生できなくなったりと、最適解でない感じがします。

ゴールとしては、アンドロイドでもiPhoneでも再生でき、PCの場合にはダウンロードしてローカルの音楽アプリでも再生できるようにしたいです。

そのための対処方法をご教示ください。

A 回答 (1件)

アンドロイド と iPhone の違いというより、


ブラウザの <audio> タグの仕様の違いでは?

https://zero-plus.io/media/html-audio/
この↑ページの、この↓節に対策の例があります。
「audioタグで、sourceタグを使って音声データを複数指定する方法」
    • good
    • 0
この回答へのお礼

お返事ありがとうございます。
<audio>タグでは、複数の音源を準備しておいて、ブラウザーに選択させる事が出来る事を思い出しました。

しかし、録音する時に毎回複数の音源を準備するという仕様は、冗長に感じられるため、もっとうまい方法が無いかと調査したところ、

MediaRecorderオブジェクトには、mime情報を持つmimeTypeというインスタンスプロパティがあり、これをBlob()コンストラクターの第二引数option.typeに渡す事で、ブラウザー毎にそのブラウザーで利用可能な音源が作成されるのではと考えました。

ただしmimeTypeプロパティはにコーデックを表す文字列が付加される場合があるため、安全を期して、
Blob(録音機.記憶, {type: 録音機.mimeType.split(';')[0]})
のようにコーデック情報を除いた文字列を渡すようにしました。

この書き方で、アンドロイドでもiPhoneでも再生でき、PCの場合にはダウンロードしてローカルの音楽アプリでも再生できるようになりました。
(^o^)

お礼日時:2024/10/15 13:52

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A