如图下：这是需求
要创建一个 Gradio 录音的 Web UI 界面，你可以使用 Gradio 的 Audio 组件来实现。下面是一个简单的示例，展示了如何创建一个 Gradio 应用程序，其中包含一个录音按钮，用户可以录制音频并提交给服务器处理。
示例代码
import gradio as gr
def process_audio(audio):
# 这里可以添加音频处理的逻辑
# 例如打印音频的长度
print(f"Received audio with length: {len(audio)} samples")
return audio
# 创建 Gradio 界面
iface = gr.Interface(
fn=process_audio,
inputs=gr.inputs.Audio(
source="microphone",
type="numpy",
label="Record Audio",
interactive=True,
format="wav",
editable=True,
min_length=1,
max_length=10
),
outputs="audio",
title="Audio Recording App"
)
# 启动 Gradio 服务器
iface.launch()
代码解释
1. 定义处理函数:
• process_audio 函数接收音频数据作为输入，并执行一些处理逻辑。在这个示例中，我们只是简单地打印音频的长度。
2. 创建 Gradio 界面:
• 使用 gr.Interface 创建一个 Gradio 界面。
• fn 参数指定处理函数。
• inputs 参数指定输入组件，这里使用 gr.inputs.Audio。
• outputs 参数指定输出组件，这里同样使用 Audio 组件。
3. 配置 Audio 组件:
• source="microphone" 表示音频来源为麦克风。
• type="numpy" 表示音频数据将以 NumPy 数组的形式传递给处理函数。
• label="Record Audio" 表示组件旁边的标签文本。
• interactive=True 表示用户可以与组件交互。
• format="wav" 表示音频文件的格式为 .wav。
• editable=True 表示用户可以编辑音频。
• min_length=1 和 max_length=10 表示音频的最小和最大长度（单位：秒）。
4. 启动 Gradio 服务器:
• 使用 iface.launch() 启动 Gradio 服务器。
运行应用程序
将上述代码保存为一个 Python 文件，例如 recording_app.py，然后在命令行中运行：
python recording_app.py
这将启动一个本地服务器，你可以在浏览器中通过 http://localhost:7860 访问。
注意事项
• 确保你已经安装了 Gradio 库。如果没有安装，可以通过 pip install gradio 安装。
• 确保麦克风已连接到计算机，并且在操作系统的声音设置中被正确识别。
• 如果你想使用 HTTPS 来启动 Gradio 服务器，请参考前面的回答中关于使用自签名证书或 OpenSSL 生成的证书的部分。
要在 Gradio 中显示录音的波形图，你需要使用 matplotlib 或 librosa 等库来绘制波形图，并将其作为图像输出。下面是一个修改后的示例，它将在用户录制音频后显示音频的波形图。
首先，确保你已经安装了必要的库：
pip install gradio matplotlib librosa
接下来是修改后的代码：
import gradio as gr
import numpy as np
import matplotlib.pyplot as plt
import librosa.display
def plot_waveform(signal, sample_rate):
plt.figure(figsize=(10, 4))
librosa.display.waveshow(signal, sr=sample_rate)
plt.xlabel("Time (seconds)")
plt.ylabel("Amplitude")
plt.title("Waveform")
plt.tight_layout()
plt.show()
def process_audio(audio):
# 音频信号通常是 float32 类型，需要转换为 numpy 数组
signal = audio.astype(np.float32)
# 假设采样率为 16 kHz
sample_rate = 16000
# 绘制波形图
plot_waveform(signal, sample_rate)
# 返回音频数据，以便在界面上显示
return signal
# 创建 Gradio 界面
iface = gr.Interface(
fn=process_audio,
inputs=gr.inputs.Audio(
source="microphone",
type="numpy",
label="Record Audio",
interactive=True,
format="wav",
editable=True,
min_length=1,
max_length=10
),
outputs="audio",
title="Audio Recording App"
)
# 启动 Gradio 服务器
iface.launch()
代码解释
1. 定义 plot_waveform 函数:
• 使用 librosa.display.waveshow 绘制波形图。
• 设置图表的标题、轴标签等。
• 使用 plt.show() 显示图像。注意，在 Gradio 中直接使用 plt.show() 不会显示图像，而是需要将图像返回给 Gradio。
2. 定义 process_audio 函数:
• 将音频信号转换为 float32 类型。
• 调用 plot_waveform 函数来绘制波形图。
• 返回处理后的音频信号。
3. 创建 Gradio 界面:
• 与之前的代码相似，但是输出仍然是音频，因为我们直接返回了音频信号而不是图像。如果要同时显示波形图，我们需要调整 Gradio 的输出类型。
修改 Gradio 输出
为了显示波形图，我们需要修改 Gradio 的输出类型，让它能够同时显示音频和波形图。由于 Gradio 默认不支持同时输出多个组件，我们需要稍微修改一下代码：
import io
from PIL import Image
def process_audio(audio):
# 音频信号通常是 float32 类型，需要转换为 numpy 数组
signal = audio.astype(np.float32)
# 假设采样率为 16 kHz
sample_rate = 16000
# 绘制波形图
fig = plot_waveform(signal, sample_rate)
# 将图像转换为 PIL 图像对象
buf = io.BytesIO()
fig.savefig(buf, format='png')
buf.seek(0)
image = Image.open(buf)
# 清除图像以释放内存
plt.close(fig)
# 返回音频数据和波形图像
return signal, image
# 创建 Gradio 界面
iface = gr.Interface(
fn=process_audio,
inputs=gr.inputs.Audio(
source="microphone",
type="numpy",
label="Record Audio",
interactive=True,
format="wav",
editable=True,
min_length=1,
max_length=10
),
outputs=["audio", "image"],
title="Audio Recording App"
)
# 启动 Gradio 服务器
iface.launch()
代码解释
1. 修改 process_audio 函数:
• 创建一个图像缓冲区，并保存波形图。
• 使用 PIL 将图像缓冲区转换为图像对象。
• 清除波形图以释放内存。
• 返回音频信号和图像对象。
2. 修改 Gradio 界面:
• 将 outputs 改为 ["audio", "image"]，这意味着输出包含音频和图像两个部分。
现在当你运行这个脚本时，Gradio 应用程序将允许用户录制音频，并在提交后显示音频的波形图。
python
import gradio as gr
import numpy as np
import matplotlib.pyplot as plt
def show_waveform(audio):
sr, data = audio
# 如果音频是立体声，我们只取第一个通道
if len(data.shape) > 1:
data = data[:, 0]
# 创建时间轴
time = np.linspace(0., len(data) / sr, len(data))
# 创建图形
fig, ax = plt.subplots(figsize=(12, 4))
ax.plot(time, data)
ax.set_xlabel('Time (s)')
ax.set_ylabel('Amplitude')
ax.set_title('Audio Waveform')
return fig
# 创建Gradio接口
iface = gr.Interface(
fn=show_waveform,
inputs=gr.Audio(source="microphone", type="numpy"),
outputs="plot",
title="音频录制与波形显示",
description="点击录音按钮开始录音，录音结束后将显示音频波形。"
)
# 启动接口
iface.launch()
```
这个脚本做了以下几件事：
1. 导入必要的库：Gradio、NumPy和Matplotlib。
2. 定义了一个`show_waveform`函数，它接收音频数据，并生成一个波形图。
3. 创建了一个Gradio接口，使用`gr.Audio`组件作为输入（设置为使用麦克风），使用`plot`作为输出。
4. 设置了界面的标题和描述。
5. 最后启动了接口。
使用这个脚本，你将得到一个网页界面，其中包含：
- 一个录音按钮，允许用户通过麦克风录音。
- 录音完成后，页面将显示录制的音频波形图。
要运行这个脚本，确保你已经安装了必要的库：
```
pip install gradio numpy matplotlib
