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

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

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

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

Laravel

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

PHP

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

解決済

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

deracine3473
deracine3473

総合スコア12

Vue.js

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

Laravel

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

PHP

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

1回答

1リアクション

1クリップ

294閲覧

投稿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👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Laravel

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

PHP

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