Wizard Notes

Pythonを使った音楽信号分析の技術録、作曲活動に関する雑記

WebApp

Chromeで Web Audio API の音が鳴らない現象への対処 (Warning: The AudioContext was not allowed to start)

久しぶりに Web Audio API を使ったコードを書いていたら、音を読み込んで再生するだけの簡単なサンプルコードでも音が鳴らないという現象に遭遇しました。 class AudioPlayer { constructor() { this.isPlaying = false; } init = () => { window.AudioCont…

React+Python Flask:数値入力フォームのデータをPOSTで送信するWebアプリ例

Flask と React でWebアプリを設計する練習として、フォームからPOSTでデータを送信/受信する簡単なWebアプリを作成してみました。 フォルダ/ディレクトリ構成 実行方法(ローカル) 実行例 プログラム Python Flask (app.py) JavaScript (main.jsx) HTML …

Python:数値で色をグラデーションさせて16進数カラーコードとして取得&HTML 表の自動生成 (matplotlib)

1次元の数値→16進数カラーコード HTML 表の自動生成 まとめ 1次元の数値→16進数カラーコード データ分析をするアプリ/プログラムでは、数値に基づいて色をグラデーションさせたいということが多々あります。 例えばPythonでは、matplotlib を使ったプロット…

python の ローカルwebサーバ で React の勉強のためのサンプルコードを動かす

最近新しい Web 音楽アプリを作ろうと考えています。 音楽関係の信号/情報処理はPythonを使いたいため、 サーバサイド: flask クライアントサイド: React という構成を検討しています。 React の勉強と理解のためにサンプルコードを走らせたり、実装した各…

Docker+Nginx+uWSGIで複数のFlaskアプリ(コンテナ)を運用

概要 Docker上での、1つのuWSGI+Flaskコンテナで複数アプリを運用するスタイルは、Blueprintなどを駆使すれば可能です。 しかし、Blueprintの仕様のせいでディレクトリ構造が複雑になってしまったり、ルーティングの際に他のサービスに影響を与えてしまう可…

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

スクリーンショット 背景 実装戦略・参考ページ サーバへの複数オーディオファイルのアップロード(ドラッグアンドドロップ) サーバ側でのファイルアップロード処理・ファイル保存 クライアント側で、ローカルにあるオーディオファイルを再生 実装 ディレク…

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

概要 ディレクトリ構成 ソースコード views.py ポイント1:index.htmlの配置とディレクトリ構成 ポイント2:サーバから送るファイルの配置 run.py(一部掲載) index.html デモ 概要 前回ご紹介した、ブラウザ上でサーバ上の音源を再生するFlask実装を、Bl…

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

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