前提
Laravelで音声投稿ができるサイトを作成しています。
ブラウザ上での音声入力は以下のサイトを参考にしました。
リンク内容
音声の録音と、録音後に音声ファイルをダウンロードするところまでは確認できました。
<html> <head> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-3"> <h1 class="mb-3">JavaScriptで録音するサンプル</h1> <div id="app"> <button class="btn btn-danger" type="button" v-if="status=='ready'" @click="startRecording">録音を開始する</button> <button class="btn btn-primary" type="button" v-if="status=='recording'" @click="stopRecording">録音を終了する</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> <script> new Vue({ el: '#app', data: { // ① 変数を宣言する部分 status: 'init', // 状況 recorder: null, // 音声にアクセスする "MediaRecorder" のインスタンス audioData: [], // 入力された音声データ audioExtension: '' // 音声ファイルの拡張子 }, methods: { startRecording() { this.status = 'recording'; this.audioData = []; this.recorder.start(); }, stopRecording() { this.recorder.stop(); this.status = 'ready'; }, getExtension(audioType) { let extension = 'wav'; const matches = audioType.match(/audio\/([^;]+)/); if(matches) { extension = matches[1]; } return '.'+ extension; } }, mounted() { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { this.recorder = new MediaRecorder(stream); this.recorder.addEventListener('dataavailable', e => { this.audioData.push(e.data); this.audioExtension = this.getExtension(e.data.type); }); // 録音を終了してファイルダウンロード this.recorder.addEventListener('stop', () => { const audioBlob = new Blob(this.audioData); const url = URL.createObjectURL(audioBlob); let a = document.createElement('a'); a.href = url; a.download = Math.floor(Date.now() / 1000) + this.audioExtension; document.body.appendChild(a); a.click(); }); this.status = 'ready'; }); } }); </script> </body> </html>
録音したファイルのURLは以下で取得できていると思うのですが、
const url = URL.createObjectURL(audioBlob);
これをControllerに投げる記述が分かりません。
テキスト入力をDB登録関数に渡す場合、formタグ内にテキスト項目を並べて、
action属性に action="{{route('controller.store')}}" のように記述しますが、
上記の音声録音後はどのように記述すれば良いでしょうか?
ご教授お願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/09/17 01:45
2022/09/17 19:54
2022/09/17 20:41