1

我正在使用 Flask 制作网络服务。我想在前端的烧瓶的静态文件夹中播放midi文件。以下是 app.py 代码的一部分。我要运行的函数是python pygame库的一个函数，这个函数播放midi文件。我在background_process_test()中实现了这个函数。我参考这篇文章编写了这段代码。 Flask - 在按钮 OnClick 事件上调用 python 函数

 @app.route('/uploader', methods=['GET', 'POST'])
 def wav_transform():
    if request.method == 'POST':
        f = request.files['file']
        if(request.form['length']):
            random_length = request.form['length']
            random_length = int(random_length)
        else:
            random_length = 100
        f.save(f'static/original_song.wav')

        ...

        midi = controller.MakeMidi(random_song, bpm, "static/random.midi")
        midi.makemidi()

        return render_template('json.html')

@app.route('/background_process_test')
def background_process_test():
    pygame.mixer.init()
    freq, size, chan = pygame.mixer.get_init()
    BUFFER = 3072
    filename = "static/random.midi"
    pygame.mixer.init(freq, size, chan, BUFFER)

    pygame.init()
    pygame.mixer.init()
    clock = pygame.time.Clock()
    pygame.mixer.music.load(filename)
    pygame.mixer.music.play()
    print("play song")
    while pygame.mixer.music.get_busy():
        clock.tick(1000)

    return "nothing"

下面是 json.html 代码。

<!DOCTYPE html>
<html>
    <head>
        <title> play and download </title>
        <meta charset="UTF-8">
        <style>
            li label{
                width:121px;
                float:center;
                font-size:20px;
                font-weight:bold;
                line-height:25px;
            }
            body{
                backgound-size: cover;
                font-family: 'Open Sans', sans-serif;
                background: #a27fb2 fixed center;
                text-align:center
            }
            h1, h2, h3, h4, h5, h6{
                font-family: 'Montserrat', sans-serif;
                margin-top:30px;
                background: #fff;
                font-size:40px;
                color:#a27fb2
            }
            fieldset{
            margin: 40px 15px;
            }
            li{
                list-style-type:none;
                color: #fff;
            }
            button{
                width:200px;
                background-color:#fff;
                border:none;
                color:#a27fb2;
                padding:10px 0;
                text-align:center;
                text-decoration:none;
                display:inline-block;
                font-size:20px;
                font-weight:bold;
                margin:4px;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend> </legend>
            <h3>play and download</h3>
            <li>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                      <script type=text/javascript>
              $(function(){
                $('a#test').bind('click', function() {
                  $.getJSON('/bacground_process_test',
                  function(data){
                    // do nothing
                  });
                  return false;
                });
              });
            </script>
                    </li>
                    <li>
            <div class='container'>
              <form>
                <a herf=# id=test><button class='btn btn-default'>Test<button></a>
              </form>
            </div>
            </li>
        </fieldset>
    </body>
</html>

综上所述，我希望在前端点击按钮时运行background_process_test()函数，从而播放midi文件。当我在本地服务器上运行此代码时，midi 文件没有播放 127.0.0.1--[13 / Nov / 2019 21:50:56] "GET / bacground_process_test HTTP / 1.1" 404-。

事实上，我的目的是播放一个midi文件，我正在尝试这样做，因为在Python中很难将midi文件转换为wav文件。或者让我知道是否有任何其他方式可以在 Flask 的静态文件夹中播放 html 中的 midi 文件。

4

1 回答 1

1

你拼错了background。注意你写的bacground_process_test：

$(function() {
    $('a#test').bind('click', function() {
        $.getJSON('/bacground_process_test', // << HERE
            function(data) {
                // do nothing
            });
        return false;
    });
});

在json.html文件中。

于 2019-11-13T13:30:50.543 回答