如何在Flask框架中结合JavaScript播放MP3文件？

核心问题分析 #

你遇到的404错误主要源于两点：

• Flask默认仅识别小写的static目录作为静态资源根目录，你的目录是大写的Static，导致框架无法自动映射资源路径；
• JavaScript中使用的相对路径是相对于当前页面的URL，而非JS文件所在目录，直接写bell.mp3会指向页面URL的同级路径，而非Static/Scripts目录。

分步解决方案 #

1. 修正静态目录配置（二选一） #

方案A：修改目录名称

将大写的Static目录改为小写的static，这是Flask的默认配置，无需额外代码修改。

方案B：指定静态目录路径

如果不想修改目录名，在main.py初始化Flask应用时显式指定静态文件夹：

from flask import Flask

# 告诉Flask使用大写的Static作为静态资源目录
app = Flask(__name__, static_folder='Static')

2. 正确引用音频文件路径 #

Flask提供url_for('static', filename='路径')函数生成标准的静态资源URL，避免硬编码路径出错。推荐在模板中传递路径给JavaScript：

步骤1：在home.html中注入音频URL

<!-- 先通过Flask生成正确的音频URL，赋值给全局变量 -->
<script>
const audioUrl = "{{ url_for('static', filename='Scripts/bell.mp3') }}";
</script>
<!-- 再引入你的JavaScript文件 -->
<script src="{{ url_for('static', filename='Scripts/script.js') }}"></script>

步骤2：修改script.js使用注入的URL

let audio = new Audio(audioUrl);
audio.play();

3. 为什么静态文件要放在static目录？ #

• Flask遵循MVC架构规范，静态资源（JS、CSS、媒体文件等）与动态模板（templates）分离存放，让项目结构更清晰；
• Flask默认会为static目录创建专属路由（默认是/static/），自动处理资源的HTTP访问、缓存控制等逻辑，无需手动编写视图函数返回静态文件；
• 模板目录templates仅用于存放Jinja2模板文件，Flask不会为该目录下的文件提供直接访问的路由，所以放在这里的MP3无法通过URL访问；根目录同理，Flask默认不会映射根目录下的文件到HTTP路由。

其他可选配置 #

如果需要自定义静态资源的URL前缀（比如不想用/static/），可以在初始化Flask时添加static_url_path参数：

app = Flask(__name__, static_folder='Static', static_url_path='/assets')

此时音频文件的URL会变成/assets/Scripts/bell.mp3，url_for会自动生成对应的路径，无需修改模板中的代码。

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