wavesurfer.js：簡単に音声ファイルの再生と波形描画が実装できるJavaScriptライブラリ
https://wavesurfer-js.org より ユーザが音楽を再生する Web アプリでは、音の出力するだけでなく、 波形描画などで音を可視化したり、操作が分かりやすいGUIを設計する必要があります。 原理的には、Web Audio API において音波形の信号値が格納されている Audio Buffer を利用して、canvas やWebGLなどで波形を描画するという手順になります。 しかし、各ライブラリを理解する必要がある上に、実装するコードが多くなります。 今回は音再生と波形描画、波形上での操作を手軽に実現できる非常に便利なライブラリ wavesurfer.js の使い方・実装…
以下のような楽曲構造の分析を行うには、Aメロ、Bメロ、サビといった区間の情報が重要になってきます。 www.wizard-notes.com 特に複数楽曲を分析するには、特定のフォーマットに従う区間情報データを書く楽曲について用意する必要があるため、曲数が多いほど用意が大変です。 そこで、手軽に楽曲構成をタグ付けし保存するWebアプリの試作してみました。 アプリのページ 現状の機能 動作デモ 追加したい機能 アプリのページ Songtag 現状の機能 開始／終了時刻とセクション名を投稿・編集・削除・可視化 Web上でローカルのオーディオファイルを再生 タグデータのダウンロード（csv, jso…
JavaScript：React＋wavesurfer.jsでローカルの音声ファイルの再生・波形表示
JavaScriptで音声を再生・波形表示するのに便利なライブラリとして wavesurfer.js があります。 wavesurfer-js.org 今回はこのwavesurfer.jsを使って、ローカルの音声ファイルを再生・表示するWebアプリを作ります。 JavasScript Chrome向け デモ 参考 Web サイト JavasScript wavesurfer.js はオーディオファイルを読み込むたびに波形を描画します。 ここは参考にしたWebサイトより、以下のように実装になっています。 波形等の再描画は wavesurfer.js 側の実装であるため、React側では再描画しな…
JavaScript：React＋Audioオブジェクトで音声ファイルをアップロード＆再生
Webアプリで音声の再生を実現する方法としては、 HTMLの<audio> 要素の利用 JSのWebAudioAPIでAudioBufferを読み込み がよく知られています。 遅延が許されない効果音や、信号処理をして再生するような用途ではAudioBufferを読み込みますが、Javascriptでの実装が少しだけ多くなります。 一方、用途によっては<audio> 要素のインターフェースであるHTMLAudioElement オブジェクト (Audio オブジェクト) を操作する方が簡単書くことができます。 そこで、この記事では ReactとAudio オブジェクトを使ってローカルの音声ファイ…
Notepad++でHTML/XMLを自動フォーマット／インデントする方法
HTML/XMLファイルの編集においてインデントはコードの保守管理を考えると非常に重要です。 Webサイトが大規模化した時や改修が必要になってHTML/XMLを見返した時に、インデントが綺麗にそろっていると構成を把握しやすいです。 また、ケアレスミスを減らすことにもつながります。複数人でコードをいじっている際はなおさらです。 ただ、HTMLタグや要素を継ぎ足したり部分的に切り貼りしていくうちに、だんたんとインデントに気を使っていちいち整えるのは面倒になってきます。 そんな面倒から解放されるために、自動フォーマットが実装されているエディタがあります。 自動フォーマットを使えば、一瞬でインデントが…
歌声／楽曲分析・音源分離に使えるデータセット MUSDB18
https://sigsep.github.io/datasets/musdb.html#musdb18-compressed-stems より 以前の記事では、様々な音楽ジャンルのステムデータ付き楽曲データセット DSD100 を紹介しました。 www.wizard-notes.com DSD100 は全100曲とそれなりの楽曲数がありますが、大規模データ分析や深層学習のような処理ではなるべく多くの楽曲データが必要となります。 本記事では、この DSD100 を1つのソースとして利用した、よりデータ数の多い楽曲データセット MUSDB18 を紹介します。 MUSDB18 の概要 ダウンロード…
歌声／楽曲分析・音源分離に使えるデータセット DSD100 について
https://sigsep.github.io/datasets/dsd100.html より 楽曲分析や音源分離のアルゴリズムを開発・動作検証する際には、何らかの楽曲データセットが必要になります。 市販の楽曲データを利用する手もありますが、2Mix・マスタリングされた音源だけでは動作検証や改良が難しいことが多々あります。 従って、各パートだけの音源：ステムデータ（パラデータ）が含まれているデータセットがあると効率的に開発・動作検証ができます。 今回は、音源分離分野でよく利用される公開データセット DSD100 を紹介します。 DSD100 概要 権利関係について 試聴Webページ ダウンロ…
Adoの楽曲のBPMを算出しました。 BPMはWaveTone を使って手動＋自動解析しています。 小数点以下がある場合は小数第一位を四捨五入して整数にしています。 各アルバム楽曲のBPM 狂言 (2022年) Track Title Length BPM 1 レディメイド 4:03 195 2 踊 3:30 128 3 ドメスティックでバイオレンス 2:38 116 4 FREEDOM 3:06 178 5 花火 3:32 100 6 会いたくて 4:55 80 7 ラッキー・ブルート 3:30 99 8 ギラギラ 4:36 96 9 阿修羅ちゃん 3:15 156 10 心という名の不可解…
Python (Anaconda) の再インストール後に起動しないエラーへの対処（環境変数の設定）
エラー内容 解決策 エラー内容 環境：Win10 Visual Studio でインストールしたPython (Anaconda) をアンインストールし、Python.orgのインストーラを使ってPythonを再導入した際に発生したエラーです。 なお、Python.orgのインストーラだけでなくMiniconda でも同じエラーが発生しました。 具体的には、コマンドプロンプト / Anaconda Prompt でpythonのスクリプトやインタプリタを実行しようとしても実行できませんでした。 その際には下記のメッセージが表示されました。 Python path configuration: …
Python：PyQtで複数の画面／ウィンドウ (Widget) を表示する
元ネタ： www.pythonguis.com PyQtを使って実用的なアプリを作ろうとすると、描画や設定などの画面を個別に表示するために複数ウィンドウを実装したいことがあります。 まず、素直に以下のようなコードを実装・実行してみます。 import sys from PyQt5.QtWidgets import ( QApplication, QMainWindow, QWidget, QPushButton, QLabel, QVBoxLayout, ) class AnotherWindow(QWidget): def __init__(self): super().__init__()…
はじめに 前の記事では、中古で入手したオーディオテクニカの耳掛けイヤホンの ATH-EM7 を分解してみました。 www.wizard-notes.com イヤホンの状態をみたところ、 イヤパッドの交換が必要である 背面に吸音材がない（ATH-EW9は有り） 耳かけ部のラバーサポートが劣化している U字ケーブルが使われている、ケーブルが劣化している の4点が修理・改造すべき箇所であることが分かりました。 そこで今回は 1, 2, 3 の修理・改造にトライしてみました。 なお、4 に対して修理しなかった理由については後述します。 www.wizard-notes.com はじめに 修理・改造内容…
「ブログリーダー」を活用して、Kureneさんをフォローしませんか？
