Laravel 10项目中存储的音频文件无法在网页播放问题

问题根源 #

1. 存储路径与访问路径不匹配：你当前数据库中存储的路径带public/前缀，而asset()函数基于项目根目录下的public文件夹生成URL，导致最终生成的URL指向错误位置。
2. 未创建Storage软链接：Laravel的storage/app/public目录需要通过软链接映射到项目根目录的public/storage，否则前端无法直接访问该目录下的文件。

修复步骤 #

1. 修正文件存储与数据库路径记录 #

修改控制器中的文件存储逻辑，使用public磁盘存储并只记录相对路径：

// 替换原有的文件存储和数据库创建代码
if ($request->hasFile('audio_file')) {
    $file = $request->file('audio_file');
    $filename = time().'_'.$file->getClientOriginalName();

    // 使用public磁盘存储，路径为audio/songs/文件名
    $file->storeAs('audio/songs', $filename, 'public');

    // 数据库只存储相对public磁盘的路径：audio/songs/xxx
    $song = Song::create([
        'title' => $request->input('title'),
        'artist_id' => $request->input('artist_id'),
        'audio_file' => 'audio/songs/'.$filename,
        'duration' => $request->input('duration'),
        'album_id' => $request->input('album_id'),
        'price' => $request->input('price'),
    ]);

    if ($song) {
        return redirect()->route('admin.dashboard')->with('success', 'Song uploaded successfully');
    } else {
        return redirect()->back()->with('error', 'Failed to save the song');
    }
}

2. 创建Storage软链接 #

在项目根目录执行Artisan命令，建立storage/app/public到public/storage的软链接：

php artisan storage:link

注意：如果是共享主机环境，可能需要手动创建软链接或联系主机提供商协助。

3. 修正Blade视图中的音频URL #

使用asset()拼接正确路径，或直接用Laravel的Storage::url()方法：

<!-- 方式1：asset拼接storage路径 -->
<audio controls>
    <source src="{{ asset('storage/' . $song->audio_file) }}" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<!-- 方式2：使用Storage::url()生成URL -->
<audio controls>
    <source src="{{ Storage::url($song->audio_file) }}" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

4. 验证URL正确性 #

修复后检查前端生成的音频URL是否类似：http://your-domain/storage/audio/songs/12345_example.mp3，直接在浏览器访问该URL，确认能正常下载音频文件，即可实现正常播放。

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