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.

F0 voice
440Hz [Play bar]
880Hz [Play bar]
1320Hz [Play bar]

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. スクリーンショット 2020-01-19 10.57.49.png

Recommended Posts

Allow Jupyter Notebook to embed audio data in HTML tables for playback
Embed audio data with Jupyter
Embed your favorite HTML in Jupyter
How to execute commands in jupyter notebook
Data analysis for improving POG 2 ~ Analysis with jupyter notebook ~
Sort BigQuery tables according to data in Dataflow
Library for "I want to do that" of data science on Jupyter Notebook
[For data science] Oreore Jupyter cheat sheet [Jupyter Notebook / Lab]
Mac application for double-clicking to open Jupyter Notebook (* .ipynb)
Automatically save .py and .html files in Jupyter notebook.
Next to Excel, for the time being, jupyter notebook
Recommendation of Jupyter Notebook, a coding environment for data scientists
How to import NoteBook as a module in Jupyter (IPython)
<Python> Build a dedicated server for Jupyter Notebook data analysis
Unable to display tensorboard in jupyter notebook on docker (solved)
How to import NoteBook as a module in Jupyter (IPython)
Shortcut key for Jupyter notebook
Introduced Jupyter Notebook to CentOS 7
Multiprocessing error in Jupyter Notebook
How to use Jupyter Notebook
Embed wav files in Jupyter
How to resolve ModuleNotFoundError: No module named XXX in Jupyter Notebook