如何调整matplotlib图表与audio布局为左右样式，使audio显示在图表右侧？

原代码通过先调用plt.show()再显示音频组件，会导致图表和音频上下排列。要改为左右排列（图表居左、音频居右），可以借助HTML布局结合Matplotlib图表的base64编码实现，具体修改如下：

修改后的代码 #

import librosa
import matplotlib.pyplot as plt
import IPython.display as ipd
import io
import base64

def plot_it(name, audio, sample_rate):
    # 将Matplotlib图表保存为内存中的图片并转base64编码
    buf = io.BytesIO()
    plt.figure(figsize=(8, 1))
    plt.plot(audio)
    plt.gca().set_title(name)
    plt.savefig(buf, format='png', bbox_inches='tight')
    buf.seek(0)
    img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
    plt.close()  # 关闭图表释放内存资源

    # 获取音频组件的HTML代码
    audio_html = ipd.Audio(data=audio, rate=sample_rate)._repr_html_()
    
    # 使用Flex布局实现左右排列
    layout_html = f'''
    <div style="display: flex; align-items: center; gap: 20px;">
        <img src="data:image/png;base64,{img_base64}" />
        <div>{audio_html}</div>
    </div>
    '''
    ipd.display(ipd.HTML(layout_html))

关键说明 #

• 把Matplotlib图表保存到内存缓冲区并转为base64编码，避免生成本地图片文件，同时能直接嵌入HTML中显示
• 通过ipd.Audio的_repr_html_()方法获取音频播放组件的HTML代码
• 利用CSS Flex布局实现横向排列，align-items: center保证图表和音频垂直居中，gap控制两者间距

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