Question

专家

我正在尝试在Web浏览器（Firefox）中单击播放mp3文件。我这样做很麻烦。这是场景，我正在运行flask服务器，而我的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和flask的问题。启用控件后，音频将通过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"

我期望的是，我将获得针对每首歌曲的音频控件，并且应该能够使用这些控件播放它们。我了解自己在做错事。

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

Answer 1

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

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

相反，您应该寻找一种方法来将文件移至Flask应用程序内的{em> 中的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

Answer 2

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

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

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

如何在Flask中使用html5播放mp3文件

2 个答案: