pythonでwavを再生しつつリアルタイムにスペクトラム（波形）描画をしたい。

Question

前提・実現したいこと

pythonでwavのオーディオスペクトラム描画（波形描画）を行いたい。

環境

windows10
python3.7

参考にしたサイト

pythonで音に合わせて動く波形（オーディオスペクトラム）を作ってみる

行ったこと

①以下から音楽をダウンロードしました。
著作権フリー音源

②ffmpegを導入しました。
ffmpegwindowsインストール参考URL
ⅰ：64bit版　安定　static選択
ⅱ：zipダウンロード
ⅲ：環境変数設定

③mp3形式をwavに変更するためにコマンドプロンプト実行

D:\work_folder\music>ffmpeg -i "優しい気持ち.mp3" -vn -ac 2 -ar 44100 -acodec pcm_s16le -f wav "yasasi_output.wav"

④下記該当ソースコードをpythonファイルにて実行(pip install必要です。)

pip install soundfile
pip install pygame

D:\work_folder\music>python wav_spect.py 

発生している問題・エラーメッセージ

波が常に加算されてしまい上げ下げ表示しない。
緑色の棒グラフがぐんぐん上がっていく。ピンクのグラフは動いている。

該当のソースコード

#!/usr/bin/env python3
import wave
import sys
import pygame
from pygame.locals import *
import scipy.fftpack as spfft
import soundfile as sf
import pyaudio
import numpy as np
import pdb
# --------------------------------------------------------------------
# パラメータ
# --------------------
fn = "yasasi_output.wav"
# 計算用
CHUNK = 1024  # pyaudioでストリームにチャンク単位で出力(何故1024かはよく知らない)
start = 0  # サンプリング開始位置
N = 1024  # FFTのサンプル数
SHIFT = 1024  # 窓関数をずらすサンプル数
hammingWindow = np.hamming(N)  # 窓関数
t = 0
# --------------------
# 描画用
SCREEN_SIZE = (854, 480)  # ディスプレイのサイズ
rectangle_list = []

# --------------------
# pygame画面初期設定
pygame.init()
screen = pygame.display.set_mode(SCREEN_SIZE)
pygame.display.set_caption("Pygame Audio Visualizer")


# --------------------------------------------------------------------
# wavファイルを再生しつつ、後に定義する再描画関数redraw()を呼び出す関数
def play_wav_file(filename):
    try:
        wf = wave.open(filename, "r")
    except FileNotFoundError:  # ファイルが存在しなかった場合
        print("[Error 404] No such file or directory: " + filename)
        return 0

    # ストリームを開く
    p = pyaudio.PyAudio()
    stream = p.open(format=p.get_format_from_width(wf.getsampwidth()),
                    channels=wf.getnchannels(),
                    rate=wf.getframerate(),
                    output=True)

    # 音声を再生
    data = wf.readframes(CHUNK)
    while data != '':
        stream.write(data)
        data = wf.readframes(CHUNK)
        redraw()
    stream.close()
    p.terminate()

# --------------------------------------------------------------------
# 「FFTかけて描画」を繰り返す．
def redraw():
    global start
    global screen
    global rectangle_list

    # --------------------
    # 対象サンプル点のブロックにFFTをかけて振幅スペクトルを計算する
    windowedData = hammingWindow * x[start:start + N]  # 窓関数をかけたデータブロック
    X = spfft.fft(windowedData)  # FFT
    amplitudeSpectrum = [np.sqrt(c.real ** 2 + c.imag ** 2)
                         for c in X]  # 振幅スペクトル

    # --------------------
    # Pygameでの描画

    screen.fill((240, 128, 128))  # 好きな色で初期化する
    
    rectangle_list.clear()  # 四角形リスト初期化
    
    # スペクトル描画 数値は実行して調整しながら
    for i in range(86):
        rectangle_list.append(pygame.draw.line(screen, (102, 205, 170), (1+i * 10, 350 + amplitudeSpectrum[i] * 10),
                                               (2+i * 10, 350 - amplitudeSpectrum[i] * 10), 4))


    
    pygame.display.update(rectangle_list)  # ディスプレイ更新


    start += SHIFT  # 窓関数をかける範囲をずらす
    if start + N > nframes:
        sys.exit()

    for event in pygame.event.get():  # 終了処理
        if event.type == QUIT:
            sys.exit()
        if event.type == KEYDOWN:
            if event.key == K_ESCAPE:
                sys.exit()

# --------------------------------------------------------------------
if __name__ == "__main__":

    # --------------------
    # wavデータを取得
    data, fs = sf.read(fn)  # dataの形状は(フレーム数×チャンネル数)
    if data.ndim == 1:
        x = data  # モノラルならそのまま使う
    if data.ndim == 2:
        x = data[:, 0]  # ステレオならLチャンネルだけに絞って処理することに(Rなら0を1にしてください)

    nframes = x.size  # フレーム数取得(FFTで窓関数をずらすときの終了条件に使います)

    # --------------------
    # 再生と描画を開始
    play_wav_file(fn)

試したこと

ディスプレイ更新の下にグラフを初期化するため下記コード追加

    # グラフ初期化
    rectangle_list = []
    amplitudeSpectrum = []
    pygame.display.update(rectangle_list)  # ディスプレイ更新
    pygame.display.__init__()

しかし変わりありませんでした。

気になった点

下の画像の赤枠のところにピンクでかなり細かく上下の表示がされているため、そこだけ表示するようにすれば叶うのかなと思っています。

知見ある方アドバイス何かありましたら、どうかよろしくお願い致します。

Answer 1

「Pygameでの描画」とコメントがある部分からの処理を以下のように修正。

• pygame.display.rectangle(rectangle_list)をpygame.display.flipに変更
• amplitudeSpectrum[i]をamplitudeSpectrum[i].astype(int)に変更
• 2+を1+に変更

    screen.fill((240, 128, 128))
    rectangle_list.clear()
    for i in range(86):
        rectangle_list.append(pygame.draw.line(screen, (102, 205, 170), (1+i * 10, 350 + amplitudeSpectrum[i].astype(int) * 10),
                                               (1+i * 10, 350 - amplitudeSpectrum[i].astype(int) * 10), 4))
    pygame.display.flip()

一番の問題は、pygame.display.rectangle(rectangle_list)では「指定した四角形の内部だけを更新する」こと。つまり、前回の描画で四角形(のひとつ)が今回の四角形よりも長かった場合、はみ出る部分の描画が更新されません。これが、「伸びる部分だけが更新されている」ように見える原因。
対策として、今回はpygame.display.flip()で画面全体を更新しています。

ささいな問題は、lineのX座標が始点と終点で1ずれているので、微妙に斜めになっていることと、lineの引数は整数だけしか受け付けなくなる予定なので(毎回その警告がコンソールに出る)、いまのうちに整数化しておくこと。

Comments

[dendenmushi]

更新されました。原因詳細理解できました。そしてグラフ確かにずれていました。あとintにastypeする件も重ねて大変ありがとうございました。

[Daregada]

ちなみに、「ピンクのグラフ」は存在せず、斜めに描画されるlineと、それと同じはずの更新範囲が微妙にずれているせいで、画面全体を塗りつぶすピンクがそこだけ見えているのだと思います。

[dendenmushi]

なるほどです。音声波形系は初めてで挑戦中です。ありがとうございました。

Answer 2

pygame使ったことないので理屈は分かりませんが、以下のように修正するとそれなりに描画することができました。
rectangle_listにより更新領域を限定していたことにより背景全体の更新ができていなかったのがまずかったように思います。

    #pygame.display.update(rectangle_list)  # ディスプレイ更新
    pygame.display.update()  # ディスプレイ更新

Comments

[dendenmushi]

確かに更新されました。回答頂きありがとうございました。