Customization of panel.pane.Audio element

Question

is there a way to customize the panel.pane.Audio element? I've tried to pass arguments like width or height like:

pn_audio  = pn.pane.Audio(audio_data, sample_rate=sps, width=800)

but with no effect after starting as bokeh app.

Here is some usable code:

import numpy as np
import holoviews as hv
import holoviews.plotting.bokeh
from holoviews import opts
import panel as pn

from bokeh.application import Application
from bokeh.application.handlers.function import FunctionHandler
from bokeh.server.server import Server


import socket
hostname = socket.gethostname()
IPAddr = socket.gethostbyname(hostname)

def generate_audio():
    sps = 25600 # Samples per second
    duration = 10 # Duration in seconds

    modulator_frequency = 2.0
    carrier_frequency = 120.0
    modulation_index = 2.0

    time = np.arange(sps*duration) / sps
    modulator = np.sin(2.0 * np.pi * modulator_frequency * time) * modulation_index
    carrier = np.sin(2.0 * np.pi * carrier_frequency * time)
    waveform = np.sin(2. * np.pi * (carrier_frequency * time + modulator))

    waveform_quiet = waveform * 0.3
    waveform_int = np.int16(waveform_quiet * 32767)

    return waveform_int, sps

def modify_doc(doc):
    audio_data, sps = generate_audio()

    hv_curve = hv.Curve( audio_data).opts(width=800)

    pn_curve  = pn.panel(hv_curve)
    pn_audio  = pn.pane.Audio(audio_data, sample_rate=sps)
    # pn_txt = pn.widgets.TextInput(name='A widget', value='A string')

    plot = pn.Column(*[pn_curve,pn_audio])

    doc.add_root(plot.get_root())
    return doc

app = Application(FunctionHandler(modify_doc))
server = Server(app, address=IPAddr,
                allow_websocket_origin=['{}:5006'.format(IPAddr)],port=5006)



server.start()
print('Opening Bokeh application on {}'.format(IPAddr))
server.io_loop.add_callback(server.show, "/")
server.io_loop.start()

I start the app from comandline

python start_bokeh_server.py

The goal is to get the audio element as wide as the above plot. For now it look like that bokeh app

Any ideas on how to get this done, without diving deep into the javascript part of panel? Thanks in advance.

Answer 1

I found your question, and had exactly the same problem. Through some random good luck, I figured out this magic (basically passing through the CSS that will customize display(Audio()) from Jupyter, will work if you pass it through like this.

I'm sure its no longer relevant to you 4 years later, but hopefully someone else will have the same problem and find my solution here! I'd opened an Issue on Holoviz as well, before I figured it out! https://github.com/holoviz/panel/issues/5917

   stylesheet = """
   audio {
   height: 20px;
   }
   """
  audio = pn.pane.Audio(y[x1:x2], 
                        sample_rate=sr, stylesheets=[stylesheet])