質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

1556閲覧

Laravelで録音したデータをDBに保存したい

deracine3473

総合スコア14

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1グッド

1クリップ

投稿2022/09/16 16:40

前提

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')}}" のように記述しますが、
上記の音声録音後はどのように記述すれば良いでしょうか?

ご教授お願い致します。

yukkuri_55👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

const audioBlob = new Blob(this.audioData);

Blobでデータができるのですよね?
HTMLのformによるsubmitではなく、例えばFormDataに乗せてXMLHttpRequest()によるリクエスト(非同期通信の手段の1つ)でWebAPIに送信し、バックグラウンドにて処理するやり方があります
FormData オブジェクトの使用

投稿2022/09/16 18:57

編集2022/09/17 01:45
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/09/17 01:45

低評価された方、理由をコメントください。
deracine3473

2022/09/17 19:54

回答ありがとうございます。 FormDataでの送信で実現できそうです。 まだ今回の処理用のContorollerが作成できていないのですが、既存のControllerにPOSTしてレスポンスが返るところまでは確認できました。
m.ts10806

2022/09/17 20:41

進んだようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問