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

laravel で音声ファイル(wav)を再生したい

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

前提

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

上記は完成済み。

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

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

該当のソースコード

component

1<?php 2 3namespace App\Livewire; 4 5use Illuminate\Http\Request; 6use Livewire\Component; 7use App\Livewire\WavFile; 8use App\Models\WavFile as ModelsWavFile; 9use Livewire\WithFileUploads; 10use Livewire\Attributes\Validate; 11use Illuminate\Support\Facades\DB; 12 13class Home extends Component 14{ 15 use WithFileUploads; 16 17 #[Validate('image|max:1024')] // 1MB Max 18 public $photo; 19 public $wav_file; 20 public function save(Request $request) 21 { 22 $file = $this->wav_file; 23 if (isset($file)) { 24 $file_name = $file->getClientOriginalName(); 25 $file->storeAs('public/', $file_name); 26 } 27 28 ModelsWavFile::create([ 29 'wav_file' => $file_name 30 ]); 31 } 32 public function render() 33 { 34 $wav_files = DB::table('wav_files') 35 ->get()->toArray(); 36 return view('livewire.home')->with('items', $wav_files); 37 } 38} 39

view

1<div> 2 <form wire:submit="save"> 3 <input type="file" wire:model="wav_file"> 4 5 @error('photo') <span class="error">{{ $message }}</span> @enderror 6 7 <button type="submit">Save photo</button> 8 9 </form> 10 <div class="py-5 px-10"> 11 @for ($index = 0; $index < count($items); $index++) 12 <div class="flex mb-4 items-center w-full"> 13 <span class="w-3/5">{{$index}}{{$items[$index]->wav_file}}</span> 14 <audio controls class="w-4/12"> 15 <source class="text-2xl my-3 text-gray-500" src="{{ asset('storage/'.$items[$index]->wav_file)}}"/> 16 </audio> 17 </div> 18 @endfor 19 </div> 20</div> 21

試したこと

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

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

laravel v10
livewire v3

コメントを投稿

0 コメント