Laravel项目中录制并上传音频至服务器的实现方法求助

前端实现（浏览器端录制与提交） #

先构建基础页面结构，包含音频预览、录制控制按钮和提交表单：

<div>
  <audio id="audioPlayer" controls></audio>
  <button id="startRecord">开始录制</button>
  <button id="stopRecord">停止录制</button>
  
  <form id="audioForm" action="{{ route('audio.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="file" id="audioFile" name="audio" style="display: none;">
    <button type="submit">提交音频</button>
  </form>
</div>

再编写JavaScript逻辑，实现浏览器端语音录制、转文件并绑定到表单：

let mediaRecorder;
let audioChunks = [];

// 开始录制
document.getElementById('startRecord').addEventListener('click', async () => {
  try {
    // 获取麦克风权限
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream);

    // 收集录制的音频数据
    mediaRecorder.ondataavailable = (e) => {
      audioChunks.push(e.data);
    };

    // 录制结束后处理音频
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
      // 预览录制内容
      const audioUrl = URL.createObjectURL(audioBlob);
      document.getElementById('audioPlayer').src = audioUrl;

      // 将Blob转为File对象，绑定到表单的file输入框
      const audioFile = new File([audioBlob], `recording-${Date.now()}.webm`, { type: 'audio/webm' });
      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(audioFile);
      document.getElementById('audioFile').files = dataTransfer.files;
    };

    audioChunks = [];
    mediaRecorder.start();
  } catch (err) {
    alert('无法获取麦克风权限，请检查浏览器设置');
  }
});

// 停止录制
document.getElementById('stopRecord').addEventListener('click', () => {
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop();
    // 停止麦克风流
    mediaRecorder.stream.getTracks().forEach(track => track.stop());
  }
});

后端处理（Laravel接收与存储） #

定义路由 #

在routes/web.php中添加提交路由：

use App\Http\Controllers\AudioController;

Route::post('/store-audio', [AudioController::class, 'store'])->name('audio.store');

编写控制器逻辑 #

创建AudioController处理文件存储：

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AudioController extends Controller
{
    public function store(Request $request)
    {
        // 验证音频文件
        $request->validate([
            'audio' => 'required|file|mimes:webm,mp3,wav|max:10240', // 限制最大10MB
        ]);

        // 存储文件到public磁盘的recordings目录
        $storagePath = $request->file('audio')->store('recordings', 'public');

        // 可选：将文件路径存入数据库
        // \App\Models\AudioRecording::create(['file_path' => $storagePath]);

        return back()->with('success', '音频已成功存储！');
    }
}

注意事项 #

• 浏览器需支持MediaRecorder API（现代主流浏览器均支持，IE除外）
• 生产环境必须使用HTTPS协议（localhost开发环境不受限制）
• 默认录制格式为webm，若需要转成mp3等格式，可借助ffmpeg相关的Laravel扩展包处理
• 可根据业务需求调整文件大小限制、允许的文件类型

内容的提问来源于stack exchange，提问作者Sifat King