lofi hiphop 風のビートをさくっと作れるリズムマシンの試作。前半がヨレたビートの生成，後半がランダムパターンのデモ #reactjs #webaudioapi #webapp #lofi #lofibeats #lofihiphophttps://t.co/L7qrtNEEmM pic.twitter.com/h0JvMf654O— Kurene (@_kurene…

エレクトロニカっぽい曲を自動生成＆展開し続けるリズムマシンのWebアプリ試作 #javascript #webaudioapi #React Electronica Machine v0.1https://t.co/HiqdWvGV7d pic.twitter.com/zjsJosajte— Kurene (@_kurene) 2022年8月21日 当初は単純なドラムマシン…

楽曲構成タグ付けWebアプリ - SongTag SongTagを開く 以前、楽曲構造の分析を行う支援ツールとして楽曲構成タグ付けWebアプリを実装しました。 www.wizard-notes.com www.wizard-notes.com さっそくアプリを使って自身で楽曲構造タグ付けの作業をするうちに…

https://wavesurfer-js.org より ユーザが音楽を再生する Web アプリでは、音の出力するだけでなく、 波形描画などで音を可視化したり、操作が分かりやすいGUIを設計する必要があります。 原理的には、Web Audio API において音波形の信号値が格納されている…

以下のような楽曲構造の分析を行うには、Aメロ、Bメロ、サビといった区間の情報が重要になってきます。 www.wizard-notes.com 特に複数楽曲を分析するには、特定のフォーマットに従う区間情報データを書く楽曲について用意する必要があるため、曲数が多いほ…

JavaScriptで音声を再生・波形表示するのに便利なライブラリとして wavesurfer.js があります。 wavesurfer-js.org 今回はこのwavesurfer.jsを使って、ローカルの音声ファイルを再生・表示するWebアプリを作ります。 JavasScript Chrome向け デモ 参考 Web …

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

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

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

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

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

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

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

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