Django音乐播放器models.FileField点击播放按钮无法传递音频到HTML

数据老陈

2026-10-1

故障可能位置及修复方案

模型字段配置错误
Track模型的audio_file字段的upload_to参数配置有误：你设置为upload_to='media/'，而Django中FileField的upload_to路径是相对于MEDIA_ROOT的，你的MEDIA_ROOT已经指向项目根目录的media文件夹，最终文件会被存储到/media/media/路径下，和你实际存放音频的/media/路径不匹配。
修复方案：将upload_to参数改为空值upload_to=''，或者直接删除该参数（默认存储在MEDIA_ROOT根目录）。
模板渲染路径带多余空格
HTML模板中source标签的src属性前后加了多余空格，渲染后的路径会自带空格导致浏览器识别错误：
原代码：

<source src='{% if item.audio_file %} {{ item.audio_file.url }} {% else %} {{ item.audio_link }} {% endif %}' type='audio/mp3'/>

修复方案：删除变量前后的空格：

<source src='{% if item.audio_file %}{{ item.audio_file.url }}{% else %}{{ item.audio_link }}{% endif %}' type='audio/mp3'/>

音频格式不匹配
source标签固定写了type='audio/mp3'，如果你的实际音频文件是flac、m4a、wav等其他格式，浏览器会因为格式不匹配拒绝加载。
修复方案：要么将type属性改为和实际音频对应的格式，要么直接删除type属性让浏览器自动识别格式。
数据库导入数据路径错误
你通过脚本导入的Track数据中，audio_file字段存储的路径可能和实际文件路径不匹配：该字段需要存储相对于MEDIA_ROOT的相对路径，比如你的音频是/media/周杰伦/晴天.mp3，字段值就应该是周杰伦/晴天.mp3，如果导入时存了绝对路径或者错误的相对路径，调用item.audio_file.url就会生成错误的访问地址。
DEBUG模式关闭导致media资源无法访问
Django自带的static(settings.MEDIA_URL...)配置仅在DEBUG=True的开发模式下生效，如果你已经将settings.py中的DEBUG改为False，Django不会再提供media资源的访问服务，自然无法加载音频。
修复方案：开发环境保持DEBUG=True，生产环境配置Nginx/Apache来代理/media路径的请求。
文件权限问题
检查项目media目录以及目录下的音频文件是否有读取权限，Linux/Mac环境下可以执行chmod -R 755 media赋予读取权限，避免因为权限不足返回403错误导致音频加载失败。

打开浏览器开发者工具（F12），切换到「网络」面板，点击播放按钮后查看音频文件的请求状态：

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