Laravel投稿サイト構築.91 -音声キャスト機能実装 1.録音機能確認-

今回から音声による読みあげ機能（キャストと呼ぶ）を実装していく。

仕様はこんな感じ。

テーマのタイトル、テーマの内容、返信の内容について音声を読み上げる。
投稿した本人はキャストできない。
複数のユーザがキャスト投稿できる（いずれ承認制にする予定）。

bladeファイルの修正

-----

//録音ボタン

<form action="{{route('thread.store')}}" method="POST">
@csrf
<div class="d-flex align-items-left">
<div id="rec_thread_title{{$thread->thread_id}}">
<button type="button" v-if="status=='ready'" @click="startRecording{{$thread->thread_id}}">録音を開始する</button>
<button type="button" v-if="status=='recording'" @click="stopRecording{{$thread->thread_id}}">録音を終了する</button>
</div>
<div class="align-items-right my-3">
<input class="btn-post mb-2 px-2 py-1 lh-1 rounded text-dark font-bold link-hover cursor-pointer fs-6" type="submit" value="アップロード">
<button type="button" class="mb-2 ms-3 px-2 py-1 lh-1 rounded text-dark font-bold link-hover cursor-pointer fs-6" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</form>
</div>

-----

Vueにて録音機能を実装

-----

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>