An example of bokeh widget to play audio data

audio_player.coffee

import * as p from "core/properties"
import {Widget, WidgetView} from "models/widgets/widget"

export class AudioPlayerView extends WidgetView
    initialize: (options) ->
        super(options)
        @get_data()
        @connect(@model.data_source.change, () => @get_data())

    get_data: () ->
        @el.innerHtml = ""

        source = @model.data_source
        for i in [0...source.get_length()]
          @create_player(source.get_column('data')[i])

    create_player: (source) ->
        audio = document.createElement("audio")
        audio.setAttribute("controls", "controls")
        audio.setAttribute("src", source)
        audio.load()
        p = document.createElement("p")
        @el.appendChild(p)
        @el.appendChild(audio)


export class AudioPlayer extends Widget
    type: "AudioPlayer"
    default_view: AudioPlayerView

    @define {
        data_source: [p.Instance, ]
    }

audio_player.py

import base64
import numpy
from bokeh.core.properties import Instance
from bokeh.io import show
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Widget


class AudioPlayer(Widget):
    __implementation__ = "audio_player.coffee"

    data_source = Instance(ColumnDataSource)


if __name__ == "__main__":
    # First, we encode input files as base64 URI
    with open('./music1.mp3', 'rb') as f:
        data1 = "data:audio/mp3;base64,"
        data1 += base64.b64encode(f.read()).decode('utf-8')
    with open('./music2.mp3', 'rb') as f:
        data2 = "data:audio/mp3;base64,"
        data2 += base64.b64encode(f.read()).decode('utf-8')

    # Then we create a data source with only column 'data'
    source = ColumnDataSource(
        data=dict(data=numpy.array([data1, data2])))
    player = AudioPlayer(data_source=source)
    show(player)