如何在烧瓶中使用 html5 播放 mp3 文件答案

【问题标题】：How to play mp3 files using html5 in flask如何在烧瓶中使用 html5 播放 mp3 文件
【发布时间】：2019-01-26 04:47:02
【问题描述】：

专家，

我正在尝试在我的网络浏览器 (Firefox) 中点击播放 mp3 文件。我这样做有困难。这是场景，我正在运行烧瓶服务器，而我的 html 是，

<div class="songlist" style="overflow-y: scroll; height:600px;">                                          
¦ ¦ <p>                                                                                                     
¦ ¦ ¦ {% for songname, song in songs.items() %}                                                             
¦ ¦ ¦ <ul>                                                                                                  
¦ ¦ ¦ ¦ <audio class="songthumb" control="controls">                                                     
¦ ¦ ¦ ¦ ¦ <source src="{{ 'file://'}}{{ song }}" type="audio/mpeg"/>                                        
¦ ¦ ¦ ¦ </audio>                                                                                          
¦ ¦ ¦ ¦ <a href="{{ 'file://'}}{{ song }}">{{ songname }}</a>                
¦ ¦ ¦ </ul>                                                                                                 
¦ ¦ ¦ {% endfor %}                                                                                          
¦ ¦ </p>                                                                                                    
</div>

当我加载页面时，我得到了 HTML5 音频控件片刻，然后它消失了。如果我点击链接，什么都不会发生。

我试图通过从终端 firefox mysong.mp3 发出以下命令来验证这不是 html5、firefox 和烧瓶问题。音频通过 Firefox 播放，控件打开。

我是 webapp 开发的新手，这对我来说是一个学习的东西。

我的 mp3 文件位于文件系统目录中。我使用 sqlalchemy 从数据库（sqlite3）查询歌曲的路径。如果我的观点很重要，那就去吧，

@app.route('/main/', defaults={'page':1}, methods=['GET', 'POST'])             
@app.route('/main/<int:page>', methods=['GET', 'POST'])                        
def page(page):                                                                                               

#------------------ Create a session and establish DB connection-------    
    Ses = sessionmaker(bind=song_cur)                                                                         
    S= Ses()                                                                                                  
    per_page = 50                                                                                             
    base_query = S.query(songdbdef.Songs.songname,                             
    ¦   ¦   songdbdef.Songs.location)                                                                         
    total = base_query.count()                                                                                
    pages = list()                                                                                            
    # Generate pages list                                                                                     
    for  i in range(int(math.ceil(total/per_page))):                           
    ¦   pages.append(i)                                                                                       
    q = base_query.limit(per_page).offset(page*per_page).all()                 
    # Converting to dicitonary for iteration                                                                  
    q = dict(q)                                                                                               

    if q:                                                                                                     
    ¦   return render_template('main_songs.html', songs = q, pages=pages)      
    else:                                                                                                     
    ¦   return "No song in the list"

我的预期是，我会获得每首歌曲的音频控件，并且我应该能够使用控件播放它们。我明白我做错了什么。

有人可以为我指出正确的方向/阐明如何解决问题并解决问题以获得我想要的吗？

【问题讨论】：

标签： python-3.x html flask web-applications

【解决方案1】：

Firefox 可能会阻止对您的音频文件的访问，因为您似乎是通过 file:// URI 方案从主文件系统加载它们，这在浏览器中存在安全风险。

如果该页面也在浏览器中使用文件 URI 方案（即file:///my-audio-page.html）打开，则可以从普通 html 页面访问文件，但因为 Flask 作为应用程序运行服务文件，此功能将被阻止。

您应该寻找一种方法将文件移动到您的 Flask 应用程序内的static/ 目录中，以便可以从中获取它们：

FlaskApp/
  app.py
  templates/
    my-audio-page.html
  static/
    song1.mp3
    song2.mp3

然后在您的模板中：

{% for songname, song in songs.items() %}
<audio controls>
    <source src="{{ url_for('static', filename=song) }}" type="file/mpeg">
</audio>
{% endfor %}

查看静态文件的文档：http://flask.pocoo.org/docs/1.0/quickstart/#static-files

【讨论】：

嗨@user2921551。第一手谢谢。我确实尝试了您的建议。但没有区别，控件出现的时间更长，但最终消失了。在四处浏览之后，看起来一个好主意可能是通过 http 服务mp3。我也在探索其他替代方案，例如使用 uWSGI+nginx，尽管它们是用于生产的，但我认为这是可能的。

【解决方案2】：

它看起来像 Firefox，阻止 file:\\ 协议。我现在使用ComplexHTTPServer 通过http 提供mp3 文件。从包含 mp3 文件的目录启动服务。为此，请在运行脚本中添加以下内容

suprocess.Popen(['python', '-m', 'ComplexHTTPServer', '<port_number>'], cwd=<mp3_directory>)

希望这对像我这样的初学者有所帮助。

【讨论】：