如何在flask中使用html5播放mp3文件 [英] How to play mp3 files using html5 in flask

问题描述

专家，

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

<div class="songlist" style="overflow-y: scroll; height:600px;">γ|<p>｜｜｜{% 为歌曲名，歌曲中的歌曲.items() %}γ γ 
｜｜｜｜<audio class="songhumb" control="controls">| | | | | <source src="{{ 'file://'}}{{ song }}" type="audio/mpeg"/>｜｜｜｜</audio>| | | 

当我加载页面时，我得到了一段时间的 HTML5 音频控件，然后它就消失了.如果我单击该链接，则没有任何反应.

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

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

我的 mp3 文件位于文件系统目录中.我使用 sqlalchemy 从数据库(sqlite3)查询歌曲的路径.如果我的观点很重要，就这样吧，

@app.route('/main/', defaults={'page':1}, methods=['GET', 'POST'])@app.route('/main/', methods=['GET', 'POST'])定义页面(页面):#----------------- 创建会话并建立数据库连接--Ses = sessionmaker(bind=song_cur)S = Ses()每页 = 50base_query = S.query(songdbdef.Songs.songname,｜songdbdef.Songs.location)总计 = base_query.count()页数 = 列表()# 生成页面列表对于范围内的 i(int(math.ceil(total/per_page))):| pages.append(i)q = base_query.limit(per_page).offset(page*per_page).all()# 转换为字典进行迭代q = 字典(q)如果 q:| return render_template('main_songs.html', song = q, pages=pages)别的:| 返回列表中没有歌曲"

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

有人能指出我正确的方向/阐明如何排除故障和解决问题以获得我想要的吗?

解决方案

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

suprocess.Popen(['python', '-m', 'ComplexHTTPServer', ''], cwd=)

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

Experts,

I am trying to play mp3 files, upon click, in my web browser(Firefox). I am having trouble doing so. Here is the scenario, I am running flask server and my html is,

<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> 

When I load the page, I get the HTML5 audio controls for a moment and it disappears. If I click the link, nothing happens.

I tried to verify this is not a html5, firefox and flask issue by issuing the following from the terminal firefox mysong.mp3. The audio plays through the firefox with the controls on.

I am new to webapp development and this is a learning stuff for me.

My mp3 files are in a filesystem directory. I query the path to the song from a db (sqlite3) using sqlalchemy. If my view matters, here it goes,

@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"             

What I anticipated is, I would get audio controls against each song and I should be able to play them using the controls. I understand I am doing something wrong.

Could someone point me to the right direction/shed some light on how to troubleshoot and fix the issue to get what I wanted?

解决方案

It looks like Firefox, blocks the file:\\ protocol. I am now serving the mp3 files through http using ComplexHTTPServer. Starting the service from the directory containing mp3 files. To do so, added the following in the runscript

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

Hope this helps some beginner like me.

这篇关于如何在flask中使用html5播放mp3文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！