如何解决Jupyter Notebook中Audio组件与波形图未相邻显示的问题

Jupyter Notebook 中 matplotlib 默认会缓存当前代码块内的所有绘图操作，待代码块全部执行完成后统一渲染所有图表；而 display(Audio()) 是调用时即时渲染，因此会出现所有音频播放器优先展示、所有波形图批量后置的错位问题。

核心逻辑是每次绘制完单个音频对应的波形图后，强制触发即时渲染，保证和前置的音频播放器顺序相邻、对应绑定。

最简修改方案 #

仅需在原有代码的绘图逻辑后增加 plt.show() 强制即时渲染即可，修改后代码如下：

from IPython.display import Audio, display
import librosa as lr
import matplotlib.pyplot as plt

# 若未默认开启行内绘图，可取消下一行注释
# %matplotlib inline

local_targets = ["files/sound1.wav", "files/sound2.wav", "files/sound3.wav"]

for audio_path in local_targets:
    wav_data_lr, sample_rate = lr.load(audio_path, mono=True, sr=16000, duration=10)
    # 渲染当前音频播放器
    display(Audio(wav_data_lr, rate=16000))

    # 绘制波形图
    plt.figure(figsize=(10, 3))
    plt.plot(wav_data_lr)
    plt.xlim([0, len(wav_data_lr)])
    plt.title(f"波形：{audio_path.split('/')[-1]}")
    # 强制即时渲染当前波形图
    plt.show()
    # 关闭当前画布释放内存，避免资源占用或绘图重叠
    plt.close()

强绑定优化方案 #

如果希望音频和波形图的绑定关系更稳定，不会被其他中间输出打断，可以用ipywidgets将两个组件封装为同一容器后一次性输出：

from IPython.display import Audio, display
import librosa as lr
import matplotlib.pyplot as plt
from ipywidgets import VBox, Image
import io

local_targets = ["files/sound1.wav", "files/sound2.wav", "files/sound3.wav"]

for audio_path in local_targets:
    wav_data_lr, sample_rate = lr.load(audio_path, mono=True, sr=16000, duration=10)
    audio_widget = Audio(wav_data_lr, rate=16000)
    
    # 绘制波形图并转为图片组件
    plt.figure(figsize=(10, 3))
    plt.plot(wav_data_lr)
    plt.xlim([0, len(wav_data_lr)])
    plt.title(f"波形：{audio_path.split('/')[-1]}")
    buf = io.BytesIO()
    plt.savefig(buf, format='png', bbox_inches='tight')
    buf.seek(0)
    img_widget = Image(value=buf.read(), format='png')
    plt.close()
    
    # 封装为垂直布局容器一次性输出
    display(VBox([audio_widget, img_widget]))

内容的提问来源于stack exchange，提问作者jake_asks_short_questions