Allow Jupyter Notebook to embed audio data in HTML tables for playback

What you want to do and problems

I can embed the Audio of Jupyter notebook, but I want to embed it in an HTML Table to display and play a large amount of audio data in a list. In other words, I want to make the following table.

However, if you just display IPython.display.Audio, the playbar will be displayed on the spot and you cannot embed it in the table as shown above.

point

IPyhton.display.Audio object audio.src_attr()However, since the audio data is base64-encoded, it is a good idea to use it to play HTML.

# manner

 To create a table that plays back 1 second of audio data at 440Hz, 880Hz, 1320Hz

```python
from IPython.display import Audio, HTML
import numpy

#Initial setting
duration = 1
fs = 16000
f0s = [440, 880, 1320]

#HTML Table generation
html = "<table><tr><th>F0</th><th>voice</th></tr>"
for f0 in f0s:
    #Generate Audio object
    wave = numpy.sin(f0 * 2 * numpy.pi * numpy.linspace(0, duration, duration * 16000))
    audio_obj = Audio(data=wave, rate=fs)
    
    #Embedding Audio Objects
    html += """
    <tr><td>%s Hz</td><td>
        <audio controls>
            <source src="%s" type="audio/wav">
        </audio></td>
    </tr>
    """ % (f0, audio_obj.src_attr())

#Close Table
html += "</table>"

HTML(html)

Now you can embed audio in tabular format like this.