Laravel livewire 3 и javascript для записи и получения звука ⇐ Php

[Anonymous]

Для этой задачи я использую Laravel 10, Livewire 3. кнопка записи при нажатии записывает голос и сохраняет его. я также хочу сохранить состояние предварительного просмотра записи при рендеринге страницы, чтобы я мог выполнить другую задачу, например прикрепить значок перед сохранением.
я использую метод диспетчеризации для вызова метода livewire, хотя javascript после создания файла,каждый раз, когда я связываю аудиофайл, я получаю пустой массив, а когда я удаляю его и добавляю «тест», dd respose — «тест»
Я пытался найти последние два дня и не мог понять, почему я не ловлю записанный файл. пожалуйста, проверьте мой код ниже
Blade:



Start Recording











@error('audio')
{{ $message }}
@enderror


@error('title')
{{ $message }}
@enderror


Publish Recording
Publishing...



Saving your Recording...


@if(session()->has('message'))
{{ session('message') }}
@endif




Компонент Recording.php
use Illuminate\Http\UploadedFile;
use Livewire\Component;
use Livewire\WithFileUploads;

use WithFileUploads;

public $title;
public $audio;
public $audioUrl;
protected $listeners = ['audioRecorded'];

public function audioRecorded($audio) // Accept audio directly
{
dd($audio);
// Check if audio is provided and is an instance of UploadedFile
if ($audio instanceof UploadedFile) {
// Process the audio file (e.g., save it to S3)
dd("Audio received successfully", $audio);
} else {
dd("No audio data received.");
}
}

Мой Javascript
document.addEventListener('DOMContentLoaded', function () {
const recordButton = document.getElementById('recordButton');
const micIcon = document.getElementById('micIcon');
const recordButtonText = document.getElementById('recordButtonText');
const durationDisplay = document.getElementById('durationDisplay');
const audioPreview = document.getElementById('audioPreview');
const audioInput = document.getElementById('audioInput');

let mediaRecorder;
let audioChunks = [];
let isRecording = false;
let startTime;
let durationInterval;

recordButton.addEventListener('click', () => {
if (!isRecording) {
console.log("Starting recording...");
startRecording();
} else {
console.log("Stopping recording...");
stopRecording();
}
});

function startRecording() {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
audioChunks = [];
startTime = new Date();
isRecording = true;

mediaRecorder.ondataavailable = event => {
audioChunks.push(event.data);
};

mediaRecorder.onstop = () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
const audioUrl = URL.createObjectURL(audioBlob);

// Set the preview audio and make it visible
audioPreview.src = audioUrl;
audioPreview.hidden = false;

// Create a File object
const audioFile = new File([audioBlob], 'recording.wav', { type: 'audio/wav' });

// Dispatch the audio file directly
Livewire.dispatch('audioRecorded', { audio: audioFile }); // Send the audio file directly

// Enable the Publish button
document.getElementById('publishButton').disabled = false;
};

micIcon.classList.replace('fa-microphone', 'fa-stop');
recordButtonText.textContent = "Stop Recording";
durationInterval = setInterval(updateDuration, 1000);
})
.catch(error => {
console.error("Error accessing microphone:", error);
alert("Microphone access denied or unavailable.");
});

durationDisplay.textContent = "00:00";
}

function stopRecording() {
if (mediaRecorder && mediaRecorder.state !== "inactive") {
mediaRecorder.stop();
clearInterval(durationInterval);
isRecording = false;

micIcon.classList.replace('fa-stop', 'fa-microphone');
recordButtonText.textContent = "Start Recording";
}
}

function updateDuration() {
const elapsedSeconds = Math.floor((new Date() - startTime) / 1000);
const minutes = String(Math.floor(elapsedSeconds / 60)).padStart(2, '0');
const seconds = String(elapsedSeconds % 60).padStart(2, '0');
durationDisplay.textContent = `${minutes}:${seconds}`;
}

function createFileList(file) {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
return dataTransfer.files;
}
});


Подробнее здесь: https://stackoverflow.com/questions/790 ... eive-audio