Need help adding logic playing a audio file from local storage in laravel

i have an app which allows me to upload audio to laravel i add path to the db and the file in storage/app/uploads.mp3 now want to retrieve the audio file and play it

my controller

<?php

namespace App\Http\Controllers;

use App\Models\Upload;
use App\Http\Requests\StoreUploadRequest;
use App\Http\Requests\UpdateUploadRequest;

class UploadController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        $songs = Upload::all();
        return view('audio_upload.index', compact('songs'));
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        return view('audio_upload.upload');
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(StoreUploadRequest $request)
    {
       $request->validated(['title' => 'required', 'description' => 'required', 'file' => 'required|mimes:mp3']);

        $file = $request->file('file');
        $fileName = time() . '_' . $file->getClientOriginalName();
        $filePath = $file->storeAs('uploads', $fileName);

        $upload = new Upload();
        $upload->title = $request->title;
        $upload->description = $request->description;
        $upload->file = $filePath;
        $upload->save();

        return redirect()->route('audio.index')->with('success', 'File uploaded successfully.');
    }

    /**
     * Display the specified resource.
     */
    public function show(Upload $upload)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(Upload $upload)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(UpdateUploadRequest $request, Upload $upload)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(Upload $upload)
    {
        //
    }
}

my index.blade.php

@include('layout')
<div class="flex mt-20 px-20 space-x-2">
    <img src="{{ asset('images/bg.png') }}" alt="nothing" width="4%" height="3%" class="rounded-b-3xl">
</div>

<div class="flex mt-20 px-10 w-full">

    <div class="flex-col px-10 w-6/12">
        <h1 class="text-6xl text-gray-800 mt-10 font-semibold">
            Speech to text Shona Model for<span class="font-bold px-4 text-blue-900">ECD</span>  students using AI Models.</h1>
        <div class="space-x-5 mt-8">
            <a href="{{route('audio.index')}}">
                <button
                    class="rounded-3xl mt-4 bg-gray-800 text-white hover:bg-gradient-to-bl from-blue-500 w-48 h-10">Start</button>
            </a>

        </div>
    </div>

    <img src="{{ asset('images/bg.png') }}" alt="" width="20%" height="20%" class="rounded-lg">
</div>