하고 싶은 일과 문제

Jupyter notebook의 Audio를 임베드는 가능하지만, 그것을 HTML의 Table에 임베드해, 다수의 음성 데이터를 일람으로 표시하거나 재생하고 싶다. 즉, 다음과 같은 표를 만들고 싶다.


F0
음성


440Hz
[재생바]

880Hz
[재생바]

1320Hz
[재생바]


그러나, IPython.display.Audio 를 display 한 것만으로는, 그 자리에서 재생 바가 표시되어 버려, 위와 같이 테이블에 묻을 수가 없다.

포인트

IPyhton.display.Audio 객체의 audio.src_attr()가, 음성 데이터를 base64 인코딩한 것이므로, 이것을 사용해 HTML 를 재생해 하면 좋다.

방법

440Hz, 880Hz, 1320Hz의 1초 음성 데이터를 재생하는 표를 만들려면

from IPython.display import Audio, HTML
import numpy

# 初期設定
duration = 1
fs = 16000
f0s = [440, 880, 1320]

# HTML Table の生成
html = "<table><tr><th>F0</th><th>音声</th></tr>"
for f0 in f0s:
    # Audio オブジェクトの生成
    wave = numpy.sin(f0 * 2 * numpy.pi * numpy.linspace(0, duration, duration * 16000))
    audio_obj = Audio(data=wave, rate=fs)

    # Audio オブジェクトの埋め込み
    html += """
    <tr><td>%s Hz</td><td>
        <audio controls>
            <source src="%s" type="audio/wav">
        </audio></td>
    </tr>
    """ % (f0, audio_obj.src_attr())

# Table を閉じる
html += "</table>"

HTML(html)

이제 이러한 방식으로 표 형식으로 음성을 삽입 할 수 있습니다.