laravel で音声ファイル（wav）を再生したい。

Question

laravel で音声ファイル（wav）を再生したい

livewireを利用して、音声ファイルを再生するアプリを作成しています。
phpでアップロードしたwavファイル再生methodを作成したいのですがwav再生の仕方がわかりません。

前提

• wavファイルをアップロードしstorage保存までは完成している。
• dbにwavファイル名だけを保存し、フロント側にリスト表示し、<audio>で再生される仕組み。
• 表示された<audio>はマウスクッリクで再生される。

上記は完成済み。

発生している問題、wavファイル再生の私からがわからない

訳あってフロント側（js,マウス操作含め）ではなく、あくまでバックエンド側で再生できる methodを教えていただきたいです。
よろしくお願いします。

該当のソースコード

<?php

namespace App\Livewire;

use Illuminate\Http\Request;
use Livewire\Component;
use App\Livewire\WavFile;
use App\Models\WavFile as ModelsWavFile;
use Livewire\WithFileUploads;
use Livewire\Attributes\Validate;
use Illuminate\Support\Facades\DB;

class Home extends Component
{
    use WithFileUploads;

    #[Validate('image|max:1024')] // 1MB Max
    public $photo;
    public $wav_file;
    public function save(Request $request)
    {
        $file = $this->wav_file;
        if (isset($file)) {
            $file_name = $file->getClientOriginalName();
            $file->storeAs('public/', $file_name);
        }

        ModelsWavFile::create([
            'wav_file' => $file_name
        ]);
    }
    public function render()
    {
        $wav_files = DB::table('wav_files')
            ->get()->toArray();
        return view('livewire.home')->with('items', $wav_files);
    }
}

<div>
    <form wire:submit="save">
        <input type="file" wire:model="wav_file">
     
        @error('photo') <span class="error">{{ $message }}</span> @enderror
     
        <button type="submit">Save photo</button>

    </form>
    <div class="py-5 px-10">
        @for ($index = 0; $index < count($items); $index++)
        <div class="flex mb-4 items-center w-full">
            <span class="w-3/5">{{$index}}{{$items[$index]->wav_file}}</span>
            <audio controls class="w-4/12">
                <source class="text-2xl my-3 text-gray-500" src="{{ asset('storage/'.$items[$index]->wav_file)}}"/>
            </audio>
        </div>
        @endfor
    </div>
</div>

試したこと

openal_buffer_dataだのなんだの調べましたが、良いヒントにはならずでした。

補足情報（FW/ツールのバージョンなど）

laravel v10
livewire v3

Comments

[tabuu]

>あくまでバックエンド側で再生できる

サーバーに接続しているスピーカーから音を出したいということですか？

[tima0314]

返信ありがとうございます。
いえ、pcのスピーカーから再生出来れば良いです。

[tabuu]

バックエンド側(PHP)はhtmlを出力するのみで、再生するのはフロント側(ブラウザ)という認識です。
バックエンド側で再生とはどのような意味でしょうか？

[tabuu]

audioタグで音声ファイルのurlを出力するのではなく、音声データそのものを出力したいということですか？

[tima0314]

経緯としましいては、NativePHP/electronを使用してアプリ作成しております。
どのようなアプリかと言いますと、音声ファイル（wav）をアップロードしそれをフットペダルスイッチにて再生するというものです。

プログラミング動画教材を作成するにあたり動画作成時、予め音声データを用意しておいて動画撮影しながらその音声データを再生するという手法をとっております。その際、このアプリのフットペダル再生機能で動画作成するつもりです。

そのため、NativePHPのグローバルホットキーを使用しフットペダルを使いたいと考えています。NativePHPのグローバルホットキーですのでフロント側を動かすのは無理でlaravel側で仕事をしなければと考えます。
そのため、laravelのメソッドでどうにか音声ファイル再生できないものかと質問に至りました。

[tima0314]

livewireの機能で、php側からJ Sイベントって動かす事って出きましたっけ？

[tima0314]

あっできますね。
https://livewire.laravel.com/docs/events
すいません。これでいけるかもです。

Answer 1

質問内容を変更し、改めて質問します。