いつもお世話になっています。
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の場合にはダウンロードしてローカルの音楽アプリでも再生できるようにしたいです。
そのための対処方法をご教示ください。
No.1ベストアンサー
- 回答日時:
アンドロイド と iPhone の違いというより、
ブラウザの <audio> タグの仕様の違いでは?
https://zero-plus.io/media/html-audio/
この↑ページの、この↓節に対策の例があります。
「audioタグで、sourceタグを使って音声データを複数指定する方法」
お返事ありがとうございます。
<audio>タグでは、複数の音源を準備しておいて、ブラウザーに選択させる事が出来る事を思い出しました。
しかし、録音する時に毎回複数の音源を準備するという仕様は、冗長に感じられるため、もっとうまい方法が無いかと調査したところ、
MediaRecorderオブジェクトには、mime情報を持つmimeTypeというインスタンスプロパティがあり、これをBlob()コンストラクターの第二引数option.typeに渡す事で、ブラウザー毎にそのブラウザーで利用可能な音源が作成されるのではと考えました。
ただしmimeTypeプロパティはにコーデックを表す文字列が付加される場合があるため、安全を期して、
Blob(録音機.記憶, {type: 録音機.mimeType.split(';')[0]})
のようにコーデック情報を除いた文字列を渡すようにしました。
この書き方で、アンドロイドでもiPhoneでも再生でき、PCの場合にはダウンロードしてローカルの音楽アプリでも再生できるようになりました。
(^o^)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでシンセサイザーを作っている途中なのですが、たまに指を離しても音が止まらなくなります 5 2024/07/15 22:25
- docomo(ドコモ) 通話録音が(最初から)自動的に始まるアプリは? 7 2023/01/16 15:53
- 画像編集・動画編集・音楽編集 YouTubeを録音できるソフトを教えてください。 5 2023/02/12 10:19
- Windows 10 Windows11 サウンドレコーダーを指定時間で録音を停止できるか 3 2024/01/23 16:12
- ノートパソコン ステレオミキサーが反応しない 1 2023/06/20 23:16
- ビデオカメラ BDの動画より音楽のみをpcへ取り込む方法 5 2022/09/18 13:17
- 国産車 ガソリンエンジン車からハイブリッド車に乗り換えました。 ガソリンエンジン車の時、カーオーディオで音楽 8 2023/06/04 09:46
- その他(スマホアプリ・スマホゲーム) YouTubeの録音(録画にあらず) 1 2022/09/25 14:15
- 音楽・動画 音楽データ(MP3)をダウンロードし、iPhoneのファイルに保存、jet audio というアプリ 1 2023/04/06 22:16
- その他(パソコン・スマホ・電化製品) iPhoneのボイスメモの編集方法についてです。 ある録音したボイスメモの一部分を削除したいのですが 1 2024/04/18 12:56
このQ&Aを見た人はこんなQ&Aも見ています
-


<tr>指定した表の行要素をボタンクリック後に表示させる方法
JavaScript
-


プログラミングについて プログラミングの練習(勉強)ができるようなサイトなどありませんか? あれば教
その他(プログラミング・Web制作)
-


プログラミングの進学について
その他(プログラミング・Web制作)
-
-
4

Web初心者です。 簡易的なWebページを作成し
その他(プログラミング・Web制作)
-
5

至急助けてください!!!あと2時間しかないです! ボタンを押したら0ランプが点灯し、コンマ5秒後に1
その他(プログラミング・Web制作)
-
6

htmlが簡単に作成できるアプリについて
HTML・CSS
-
7

pythonでAmazonのほしいものリストをローカル保存するスクリプト書いたら一部しか保存できぬ!
その他(プログラミング・Web制作)
-
8

アップロードファイルを表示するためにはどうすればよいでしょうか?
PHP
-
9

c++の勉強方法を教えてくださいプログラミングをやった事がなく1から勉強を始めようと思います1日1時
C言語・C++・C#
-
10

【ExcelVBA】dictionaryの重複判断の基準(セル結合だと違う値として認識される)
Visual Basic(VBA)
-
11

フロントエンドエンジニアをしていますが、スキルアップのための転職、異動は3年目では早すぎますか? 今
その他(プログラミング・Web制作)
-
12

プログラミングのやり方ざっくりでいいから教えて
その他(プログラミング・Web制作)
-
13

EJSを仕事でなんとなくで使っているので、もっと体系的に学びたいのですが、おすすめの本やサイトを教え
HTML・CSS
-
14

これってなんの電話かわかりますか?どこかの国?
AJAX
-
15

添付URLの様なサイトを作るにはどうすればいいですか?※どんな技術が使われていますか
その他(プログラミング・Web制作)
-
16

特許公報のPDFから項目毎にExcelシートの列に転記したい
オープンソース
-
17

画像生成AIのプロンプトの作り方について質問です。 ちょっと性的な部分もあるので詳しくは書きませんが
その他(プログラミング・Web制作)
-
18

Webサイトの「デザインのみ(コーディング不要)」を依頼されました。 「レスポンシブデザイン」を希望
HTML・CSS
-
19

htmlでstart-|"から"|-stop"までを"->"で埋めたいのですが両端の位置は不変にし"
HTML・CSS
-
20

html 階層を下げると3分割画面が1画面になる
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンを押したあとに画像を表...
-
スマホ上で、左右スワイプで次...
-
ラジオボタンを複数選択したと...
-
jsonテキストデータの並び替え...
-
Adobe acrobat proでフォームを...
-
画面に表示したらアニメーショ...
-
2025年相性がいい人のサイトの...
-
jQueryでのレスポンシブが綺麗...
-
jsで質問です。 formをsubmitし...
-
二次元配列を使って順位をだす...
-
【JS】selectでchangeした時の...
-
sessionStorageを調べています。
-
jsで質問です。 ボタンが二つ存...
-
ブックマークレットについて
-
タグを教えてください。
-
CookieをWebStoeageに変える
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
タグを教えてください。
-
jqueryのselect2で検索欄の文字...
-
jsonテキストデータの並び替え...
-
初心者です。gulpでコンパイル...
-
ラジオボタンを複数選択したと...
-
階層別の組織図の自動作成について
-
jQueryで同じクラス名のものを...
-
二次元配列を使って順位をだす...
-
読み込んだQRコードをフォーム...
-
画面遷移を行わずに同一ページ...
-
セレクトを全て選択されていな...
-
【Google Apps Script】「ライ...
-
Adobe acrobat proでフォームを...
-
二次元配列の全要素の全要素を...
-
【GAS】WEBアプリでハイパーリ...
-
GASでGoogleフォームの自動返信...
-
フォームが空欄の時にフォーム...
-
セレクトボックスで配列を呼び...
-
イラストレーター、縦中横のシ...
おすすめ情報









