DockerのNginx+uWSGI+FlaskサーバをHTTPS（SSL）対応

Webサイトの運営や個人情報・コンテンツを扱うWebサービスを作る上で、https（SSL）対応は今や欠かせません。 というわけで、Dockerで気軽に適用できないか試行錯誤したところ、以下の方法でうまく行きました。 HTTPS通信を受けるNginxコンテナを新たに追加します。 ベース qiita.com 変更点 docker-compose.yml nginx-sslとvolumesを追加 version: "2" services: uwsgi: build: ./app volumes: - ./app:/var/www/ ports: - "3031:3031" environment…

楽曲クロスフェード作成支援サービスの試作開発まとめ

Screen shot - Auto X-fade www.wizardcraft.works はじめに 目的と設計思想 技術的なところ インフラ構築 サーバ側（Flask） クライアント側（Webデザイン） Bootstrap4 css リスト（li要素）のインタラクティブな並べ替え 信号処理（Python） 未実装、まだ悩んでいるところ クライアント側でのローカルオーディオファイルの再生 最後に はじめに 転職に伴い、残っていた約2週間分の有休休暇を消化していました。 きっと明日から通勤に嘆くことになると思います。 さて、明日から新しい会社で働くのですが、しばらくはまとまった休みが取れそう…

Flask+jQueryでFormDataのファイルと値を一緒にPOST

JavaScriptからFlaskにファイルと何らかの値を一緒にPOSTしたい時に少し悩み、最終的に以下のようなコードで実現できました。 ポイントはFlaskでrequest.filesとrequest.valueを使い分けるところです。 javascript（クライアント側） ... var fd = new FormData(); fd.append('file', file_object); //POSTしたいファイルオブジェクト fd.append('index', index); //POSTしたい値 ... $.ajax({ ... data: fd, ... }) Flask（サ…

音楽系Webサービスのインフラ構築：DockerでNginx+uWSGI+Flask+ffmpeg+LibROSA

Pythonで音楽系Webサービスを作るにあたり、素晴らしい音信号処理モジュールであるLibROSAと、様々なオーディオファイルを扱うには必須であるFFmpegをDockerに導入してみました。 最終的に、参考ページにあるような、(Nginx+)uWSGI+Flaskも入ったDocker コンテナを運用できるようになります。 参考ページ qiita.com qiita.com Nginxコンテナ 参考ページそのままです uWSGI+Flask+LibROSA+ffmpegコンテナ Dockerfileを変更しました。 # ベースイメージ FROM python:3.6 #FROM contin…

Flask：オーディオファイルをjQuery.ajaxでアップロードしながら、クライアント側でローカルのファイルを再生

スクリーンショット 背景 実装戦略・参考ページ サーバへの複数オーディオファイルのアップロード（ドラッグアンドドロップ） サーバ側でのファイルアップロード処理・ファイル保存 クライアント側で、ローカルにあるオーディオファイルを再生 実装 ディレクトリ構成 dropzone_handler.js dropzone_uploader.js style_dropzone.css run.py (Flask) index.html デモ 最後に スクリーンショット デモアプリのスクリーンショット 背景 ユーザがアップロードするオーディオファイルを使ってWebアプリを作成する時に、ファイルサイズによる通…

Flask：Webアプリでサーバ上のオーディオファイルを再生・ダウンロード（Blueprint版、デモ付き）

概要 ディレクトリ構成 ソースコード views.py ポイント1：index.htmlの配置とディレクトリ構成 ポイント2：サーバから送るファイルの配置 run.py（一部掲載） index.html デモ 概要 前回ご紹介した、ブラウザ上でサーバ上の音源を再生するFlask実装を、Blueprintを使って実用化した例です。 ※前回の記事も合わせて読んでいただければ幸いです。 ディレクトリ構成 devディレクトリの中に、flask_play_audioのようなアプリをいくつも制作することを想定しています。 project_root ├ dev/ │ ├ another_yourapp/ │…

Flask：Webアプリでサーバ上のオーディオファイルを再生・ダウンロード

概要 ブラウザ上でサーバ上の音源を再生するWebアプリを、Flaskで実現するための実装例です。 ディレクトリ構成 flask_play_audio/ ├ music/ │ └ audio.mp3 ├ templates/ │ └ index.html └ app.py ソースコード app.py # -*- coding: utf-8 -*- from flask import Flask, render_template, send_from_directory app = Flask(__name__) @app.route("/") def index(): return render…

LibROSA: ステレオ信号のWAV書き出し（write_wav）におけるstruct.errorの解決方法

問題点 表題の通り、以下のコードでエラーが発生します。 import librosa sr=44100 #オーディオ信号をNumpy形式でロードし、yに格納 y, sr = librosa.core.load(input_filepath, sr=sr, mono=False) # yをwavフォーマットで書き出し # ここで、yがステレオ信号、すなわち2次元配列 y.shape=(チャネル数, 時間サンプル数)のとき struct.error発生 librosa.output.write_wav(output_wav_filepath, y, sr) Traceback (most rece…

レトロで可愛らしい小型スピーカー HM11 Bluetooth Speaker

最近、Amazonで中華製？の変わった製品（音楽機器、電子パーツとか）を探すのにハマっています。検索してもすぐには見つからないのですが、恐ろしいほど激安だったり、買う予定がなくても「なにこれ欲しい…！」と思ってしまうような、ちょっと変わった趣向のものが見つかったりします。 （ただし、数日で値段が大きく変動するもあったり、発送に数週間以上かかるものもあったり） HM11 Bluetooth Speaker このアンティーク・レトロ調のBluetoothスピーカも、おもしろそうな音楽系ガジェットを探っている中で見つけたものです。 こういう、レトロ感があって音楽再生機器を象徴するデザインっていいです…

Flask+Flask-Dropzone+LibROSAで作るオーディオ信号処理基盤

はじめに 実装 index.html Flaskの主要部（app.py） オーディオ信号処理モジュール 最後に はじめに NumPyやLibROSA、scikit-learnなどのPythonの素晴らしい信号処理・統計解析モジュールを利用してオーディオ信号処理アプリを作るため、学習コストが低いマイクロフレームワークのFlaskを使いWeb基盤を作ってみました。 実装 ユーザがアップロードした複数のオーディオファイルに対して、LibROSAで処理を行うところまで実装してみました。 今回は、各オーディオファイルを読み込み、時間サンプル数を出力して表示しています。 ファイルのアップロードは、Flas…