ipyaudio 0.1.0__py3-none-any.whl

__tests__/index.spec.ts

@@ -0,0 +1,26 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+// Add any needed widget imports here (or from controls)
+// import {} from '@jupyter-widgets/base';
+
+import { createTestModel } from './utils'
+
+import { ExampleModel } from '..'
+
+describe('Example', () => {
+  describe('ExampleModel', () => {
+    it('should be createable', () => {
+      const model = createTestModel(ExampleModel)
+      expect(model).toBeInstanceOf(ExampleModel)
+      expect(model.get('value')).toEqual('Hello World')
+    })
+
+    it('should be createable with a value', () => {
+      const state = { value: 'Foo Bar!' }
+      const model = createTestModel(ExampleModel, state)
+      expect(model).toBeInstanceOf(ExampleModel)
+      expect(model.get('value')).toEqual('Foo Bar!')
+    })
+  })
+})

__tests__/utils.ts

@@ -0,0 +1,108 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import * as widgets from '@jupyter-widgets/base'
+import * as baseManager from '@jupyter-widgets/base-manager'
+import * as services from '@jupyterlab/services'
+
+let numComms = 0
+
+export class MockComm implements widgets.IClassicComm {
+  constructor() {
+    this.comm_id = `mock-comm-id-${numComms}`
+    numComms += 1
+  }
+  on_close(fn: ((x?: any) => void) | null): void {
+    this._on_close = fn
+  }
+  on_msg(fn: (x?: any) => void): void {
+    this._on_msg = fn
+  }
+  _process_msg(msg: services.KernelMessage.ICommMsgMsg): void | Promise<void> {
+    if (this._on_msg) {
+      return this._on_msg(msg)
+    } else {
+      return Promise.resolve()
+    }
+  }
+  close(): string {
+    if (this._on_close) {
+      this._on_close()
+    }
+    return 'dummy'
+  }
+  send(): string {
+    return 'dummy'
+  }
+
+  open(): string {
+    return 'dummy'
+  }
+
+  comm_id: string
+  target_name = 'dummy'
+  _on_msg: ((x?: any) => void) | null = null
+  _on_close: ((x?: any) => void) | null = null
+}
+
+export class DummyManager extends baseManager.ManagerBase {
+  constructor() {
+    super()
+    this.el = window.document.createElement('div')
+  }
+
+  display_view(msg: services.KernelMessage.IMessage, view: widgets.DOMWidgetView, options: any) {
+    // TODO: make this a spy
+    // TODO: return an html element
+    return Promise.resolve(view).then((view) => {
+      this.el.appendChild(view.el)
+      view.on('remove', () => console.log('view removed', view))
+      return view.el
+    })
+  }
+
+  protected loadClass(className: string, moduleName: string, moduleVersion: string): Promise<any> {
+    if (moduleName === '@jupyter-widgets/base') {
+      if ((widgets as any)[className]) {
+        return Promise.resolve((widgets as any)[className])
+      } else {
+        return Promise.reject(`Cannot find class ${className}`)
+      }
+    } else if (moduleName === 'jupyter-datawidgets') {
+      if (this.testClasses[className]) {
+        return Promise.resolve(this.testClasses[className])
+      } else {
+        return Promise.reject(`Cannot find class ${className}`)
+      }
+    } else {
+      return Promise.reject(`Cannot find module ${moduleName}`)
+    }
+  }
+
+  _get_comm_info() {
+    return Promise.resolve({})
+  }
+
+  _create_comm() {
+    return Promise.resolve(new MockComm())
+  }
+
+  el: HTMLElement
+
+  testClasses: { [key: string]: any } = {}
+}
+
+export interface Constructor<T> {
+  new (attributes?: any, options?: any): T
+}
+
+export function createTestModel<T extends widgets.WidgetModel>(constructor: Constructor<T>, attributes?: any): T {
+  const id = widgets.uuid()
+  const widget_manager = new DummyManager()
+  const modelOptions = {
+    widget_manager: widget_manager,
+    model_id: id,
+  }
+
+  return new constructor(attributes, modelOptions)
+}

ipyaudio-0.1.0.dist-info/LICENSE.txt

@@ -0,0 +1,27 @@
+Copyright (c) 2025 Zhendong Peng
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

ipyaudio-0.1.0.dist-info/METADATA

@@ -0,0 +1,151 @@
+Metadata-Version: 2.2
+Name: ipyaudio
+Version: 0.1.0
+Summary: A Custom Jupyter Widget Library
+Author-email: Zhendong Peng <pzd17@tsinghua.org.cn>
+License: Copyright (c) 2025 Zhendong Peng
+        All rights reserved.
+        
+        Redistribution and use in source and binary forms, with or without
+        modification, are permitted provided that the following conditions are met:
+        
+        1. Redistributions of source code must retain the above copyright notice, this
+           list of conditions and the following disclaimer.
+        
+        2. Redistributions in binary form must reproduce the above copyright notice,
+           this list of conditions and the following disclaimer in the documentation
+           and/or other materials provided with the distribution.
+        
+        3. Neither the name of the copyright holder nor the names of its
+           contributors may be used to endorse or promote products derived from
+           this software without specific prior written permission.
+        
+        THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+        AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+        IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+        DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+        FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+        DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+        SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+        CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+        OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+        OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+        
+Project-URL: Homepage, https://github.com/pengzhendong/ipyaudio
+Keywords: IPython,Jupyter,Widgets
+Classifier: Framework :: Jupyter
+Classifier: Intended Audience :: Developers
+Classifier: Intended Audience :: Science/Research
+Classifier: License :: OSI Approved :: BSD License
+Classifier: Programming Language :: Python
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.7
+Classifier: Programming Language :: Python :: 3.8
+Classifier: Programming Language :: Python :: 3.9
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Requires-Python: >=3.9
+Description-Content-Type: text/markdown
+License-File: LICENSE.txt
+Requires-Dist: audiolab>=0.0.5
+Requires-Dist: ipywidgets>=8.0.0
+Requires-Dist: ipydatawidgets>=4.3.5
+Provides-Extra: docs
+Requires-Dist: jupyter_sphinx; extra == "docs"
+Requires-Dist: nbsphinx; extra == "docs"
+Requires-Dist: nbsphinx-link; extra == "docs"
+Requires-Dist: pypandoc; extra == "docs"
+Requires-Dist: pytest_check_links; extra == "docs"
+Requires-Dist: recommonmark; extra == "docs"
+Requires-Dist: sphinx>=1.5; extra == "docs"
+Requires-Dist: sphinx_rtd_theme; extra == "docs"
+Provides-Extra: examples
+Provides-Extra: test
+Requires-Dist: nbval; extra == "test"
+Requires-Dist: pytest-cov; extra == "test"
+Requires-Dist: pytest>=6.0; extra == "test"
+
+
+# ipyaudio
+
+[![Build Status](https://travis-ci.org/pengzhendong/ipyaudio.svg?branch=master)](https://travis-ci.org/pengzhendong/ipyaudio)
+[![codecov](https://codecov.io/gh/pengzhendong/ipyaudio/branch/master/graph/badge.svg)](https://codecov.io/gh/pengzhendong/ipyaudio)
+
+
+A Custom Jupyter Widget Library
+
+## Installation
+
+You can install using `pip`:
+
+```bash
+pip install ipyaudio
+```
+
+If you are using Jupyter Notebook 5.2 or earlier, you may also need to enable
+the nbextension:
+```bash
+jupyter nbextension enable --py [--sys-prefix|--user|--system] ipyaudio
+```
+
+## Development Installation
+
+Create a dev environment:
+```bash
+conda create -n ipyaudio-dev -c conda-forge nodejs python jupyterlab=4.0.11
+conda activate ipyaudio-dev
+```
+
+Install the python. This will also build the TS package.
+```bash
+pip install -e ".[test, examples]"
+```
+
+When developing your extensions, you need to manually enable your extensions with the
+notebook / lab frontend. For lab, this is done by the command:
+
+```
+jupyter labextension develop --overwrite .
+jlpm run build
+```
+
+For classic notebook, you need to run:
+
+```
+jupyter nbextension install --sys-prefix --symlink --overwrite --py ipyaudio
+jupyter nbextension enable --sys-prefix --py ipyaudio
+```
+
+Note that the `--symlink` flag doesn't work on Windows, so you will here have to run
+the `install` command every time that you rebuild your extension. For certain installations
+you might also need another flag instead of `--sys-prefix`, but we won't cover the meaning
+of those flags here.
+
+### How to see your changes
+#### Typescript:
+If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different
+terminals to watch for changes in the extension's source and automatically rebuild the widget.
+
+```bash
+# Watch the source directory in one terminal, automatically rebuilding when needed
+jlpm run watch
+# Run JupyterLab in another terminal
+jupyter lab
+```
+
+After a change wait for the build to finish and then refresh your browser and the changes should take effect.
+
+#### Python:
+If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.
+
+## Updating the version
+
+To update the version, install tbump and use it to bump the version.
+By default it will also create a tag.
+
+```bash
+pip install tbump
+tbump <new-version>
+```
+

ipyaudio-0.1.0.dist-info/RECORD

@@ -0,0 +1,11 @@
+__tests__/index.spec.ts,sha256=tgb9wfXJZURRZ8Qt4h749DsmIK6cc22OqsxpJz_XBUI,816
+__tests__/utils.ts,sha256=pBou394y8EObq0tJapYIyVY8K4Fiq3syIWP4-tPEEWM,2833
+wavesurfer/pcm_player.ts,sha256=ElomdQa46OHDOS2rnPc6DzvfBt3sIi7iYgBekvTQDLM,3713
+wavesurfer/player.ts,sha256=Ft1jhdYPp6Der4vVMHLbH3QzKpwY-J61nSdZZxBSEbw,4599
+wavesurfer/recorder.ts,sha256=VV0o3Fs-xFavTkHWP0-SWymgEvnGLSxI1v-W1K9OJeI,6083
+wavesurfer/utils.ts,sha256=RH9U27IH4u1FG_Veo_2XgaZVddyW9km-a_jhl7Eddzs,4078
+ipyaudio-0.1.0.dist-info/LICENSE.txt,sha256=-uZ5GSv8HIaOXcLH77MEBajSXj7X8T5N989WfkUFYKc,1498
+ipyaudio-0.1.0.dist-info/METADATA,sha256=O_9S6nBES_gY2_cZU_hd45vzVu4KnaHQ7fHsXqxSQ7g,5664
+ipyaudio-0.1.0.dist-info/WHEEL,sha256=jB7zZ3N9hIM9adW7qlTAyycLYW9npaWKLRzaoVcLKcM,91
+ipyaudio-0.1.0.dist-info/top_level.txt,sha256=5cqDxN7ZWxG8VJmnGGQyht3YqnK_GJC07O1fgai5reo,21
+ipyaudio-0.1.0.dist-info/RECORD,,

ipyaudio-0.1.0.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (75.8.2)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

ipyaudio-0.1.0.dist-info/top_level.txt

@@ -0,0 +1,2 @@
+__tests__
+wavesurfer

wavesurfer/pcm_player.ts

@@ -0,0 +1,119 @@
+// Copyright (c) Zhendong Peng
+// Distributed under the terms of the Modified BSD License.
+
+import { createElement, createObjectURL } from './utils'
+
+export class PCMPlayer {
+  public playButton: HTMLButtonElement
+  private _isDone: boolean = false
+  private _isPlaying: boolean = true
+  private _interval: number
+  private _samples: Int16Array = new Int16Array(0)
+  private _allSamples: Int16Array = new Int16Array(0)
+  private _audioCtx: AudioContext
+  private _gainNode: GainNode
+  private _startTime: number
+  private _options: { channels: number; sampleRate: number; flushTime: number; language: string }
+
+  constructor(
+    options?: Partial<{
+      channels: number
+      sampleRate: number
+      flushTime: number
+      language: string
+    }>,
+  ) {
+    this._options = Object.assign({ channels: 1, sampleRate: 16000, flushTime: 100, language: 'en' }, options)
+    this.playButton = createElement('button', 'btn btn-danger me-3 my-3', '<i class="fa fa-pause"></i>')
+    this.playButton.onclick = () => {
+      this._isPlaying = !this._isPlaying
+      this._isPlaying ? this.play() : this.pause()
+      this.playButton.innerHTML = `<i class="fa fa-${this._isPlaying ? 'pause' : 'play'}"></i>`
+    }
+
+    this._interval = window.setInterval(this.flush.bind(this), this._options.flushTime)
+    this._audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)()
+    this._gainNode = this._audioCtx.createGain()
+    this._gainNode.gain.value = 1.0
+    this._gainNode.connect(this._audioCtx.destination)
+    this._startTime = this._audioCtx.currentTime
+  }
+
+  set sampleRate(rate: number) {
+    this._options.sampleRate = rate
+  }
+
+  setDone() {
+    this._isDone = true
+  }
+
+  feed(base64Data: string) {
+    const binaryString = atob(base64Data)
+    const buffer = new ArrayBuffer(binaryString.length)
+    const bufferView = new Uint8Array(buffer)
+    for (let i = 0; i < binaryString.length; i++) {
+      bufferView[i] = binaryString.charCodeAt(i)
+    }
+    const data = new Int16Array(buffer)
+    this._samples = new Int16Array([...this._samples, ...data])
+    this._allSamples = new Int16Array([...this._allSamples, ...data])
+  }
+
+  get url() {
+    return createObjectURL(this._allSamples.buffer, {
+      numChannels: this._options.channels,
+      sampleRate: this._options.sampleRate,
+    })
+  }
+
+  private flush() {
+    if (!this._samples.length) {
+      return
+    }
+    const isDone = this._isDone
+    const bufferSource = this._audioCtx.createBufferSource()
+    const length = this._samples.length / this._options.channels
+    const audioBuffer = this._audioCtx.createBuffer(this._options.channels, length, this._options.sampleRate)
+
+    for (let channel = 0; channel < this._options.channels; channel++) {
+      const audioData = audioBuffer.getChannelData(channel)
+      let offset = channel
+      for (let i = 0; i < length; i++) {
+        audioData[i] = this._samples[offset] / 32768
+        offset += this._options.channels
+      }
+    }
+
+    this._startTime = Math.max(this._startTime, this._audioCtx.currentTime)
+    bufferSource.buffer = audioBuffer
+    bufferSource.connect(this._gainNode)
+    bufferSource.start(this._startTime)
+    bufferSource.onended = () => {
+      this.playButton.disabled = isDone ? true : false
+    }
+    this._startTime += audioBuffer.duration
+    this._samples = new Int16Array(0)
+  }
+
+  async play() {
+    await this._audioCtx.resume()
+  }
+
+  async pause() {
+    await this._audioCtx.suspend()
+  }
+
+  volume(volume: number) {
+    this._gainNode.gain.value = volume
+  }
+
+  destroy() {
+    if (this._interval) {
+      clearInterval(this._interval)
+    }
+    this._samples = new Int16Array(0)
+    this._audioCtx.close()
+  }
+}
+
+export default PCMPlayer

wavesurfer/player.ts

@@ -0,0 +1,141 @@
+// Copyright (c) Zhendong Peng
+// Distributed under the terms of the Modified BSD License.
+
+import WaveSurfer, { WaveSurferOptions } from 'wavesurfer.js'
+import { type GenericPlugin } from 'wavesurfer.js/dist/base-plugin.js'
+import HoverPlugin, { HoverPluginOptions } from 'wavesurfer.js/dist/plugins/hover.js'
+import MinimapPlugin, { MinimapPluginOptions } from 'wavesurfer.js/dist/plugins/minimap.js'
+import SpectrogramPlugin, { SpectrogramPluginOptions } from 'wavesurfer.js/dist/plugins/spectrogram.js'
+import TimelinePlugin, { TimelinePluginOptions } from 'wavesurfer.js/dist/plugins/timeline.js'
+import ZoomPlugin, { ZoomPluginOptions } from 'wavesurfer.js/dist/plugins/zoom.js'
+
+import PCMPlayer from './pcm_player'
+import { createElement, createObjectURL, formatTime } from './utils'
+
+export interface PlayerConfig {
+  options: WaveSurferOptions
+  isStreaming: boolean
+  language?: string
+  plugins?: string[]
+  pluginOptions?: {
+    hover?: HoverPluginOptions
+    minimap?: MinimapPluginOptions
+    spectrogram?: SpectrogramPluginOptions
+    timeline?: TimelinePluginOptions
+    zoom?: ZoomPluginOptions
+  }
+}
+
+export default class Player {
+  public el: HTMLDivElement
+  private _container: HTMLDivElement
+  private _duration: HTMLDivElement
+  private _currentTime: HTMLDivElement
+  private _downloadButton: HTMLButtonElement
+  private _wavesurfer: WaveSurfer
+  private _config: PlayerConfig
+  // streaming
+  private _pcmPlayer: PCMPlayer
+
+  constructor(config: PlayerConfig) {
+    this.el = createElement('div', 'lm-Widget')
+    this._container = createElement('div', 'waveform')
+    this._duration = createElement('div', 'duration', '0:00')
+    this._currentTime = createElement('div', 'time', '0:00')
+    this._container.append(this._duration, this._currentTime)
+    this.el.append(this._container)
+    this._config = config
+  }
+
+  get url() {
+    if (this._config.isStreaming) {
+      return this._pcmPlayer.url
+    } else {
+      return createObjectURL(this._wavesurfer.getDecodedData())
+    }
+  }
+
+  set sampleRate(rate: number) {
+    if (this._config.isStreaming) {
+      this._pcmPlayer.sampleRate = rate
+    }
+    this._wavesurfer.options.sampleRate = rate
+  }
+
+  load(url: string) {
+    if (this._config.isStreaming) {
+      this._pcmPlayer.feed(url)
+      this._wavesurfer.load(this.url)
+    } else {
+      this._wavesurfer.load(url)
+    }
+  }
+
+  setDone() {
+    this._pcmPlayer.setDone()
+  }
+
+  createPCMPlayer() {
+    if (this._config.isStreaming) {
+      this._pcmPlayer = new PCMPlayer({
+        channels: 1,
+        sampleRate: this._config.options.sampleRate,
+      })
+      this.el.append(this._pcmPlayer.playButton)
+    }
+  }
+
+  createDownloadButton() {
+    this._downloadButton = createElement('button', 'btn btn-success my-3')
+    const label = this._config.language === 'zh' ? '下载' : 'Download'
+    this._downloadButton.innerHTML = `${label} <i class="fa fa-download"></i>`
+    this.el.append(this._downloadButton)
+    this._downloadButton.onclick = () => {
+      const link = document.createElement('a')
+      link.href = this.url
+      link.download = 'audio.wav'
+      link.click()
+    }
+  }
+
+  static createPlugins(config: PlayerConfig) {
+    const pluginMap = {
+      hover: () => HoverPlugin.create(config.pluginOptions?.hover),
+      minimap: () =>
+        MinimapPlugin.create({
+          ...config.pluginOptions?.minimap,
+          plugins: [
+            HoverPlugin.create({
+              ...config.pluginOptions?.hover,
+              lineWidth: 1,
+            }),
+          ],
+        }),
+      spectrogram: () => SpectrogramPlugin.create(config.pluginOptions?.spectrogram),
+      timeline: () => TimelinePlugin.create(config.pluginOptions?.timeline),
+      zoom: () => ZoomPlugin.create(config.pluginOptions?.zoom),
+    }
+    return Array.from(config.plugins ?? [])
+      .map((plugin) => pluginMap[plugin as keyof typeof pluginMap]?.())
+      .filter(Boolean) as GenericPlugin[]
+  }
+
+  createWaveSurfer() {
+    this._wavesurfer = WaveSurfer.create({
+      ...this._config.options,
+      container: this._container,
+      plugins: Player.createPlugins(this._config),
+    })
+    this._wavesurfer.on('interaction', () => this._wavesurfer.playPause())
+    this._wavesurfer.on('decode', (time) => (this._duration.textContent = formatTime(time)))
+    this._wavesurfer.on('timeupdate', (time) => (this._currentTime.textContent = formatTime(time)))
+  }
+
+  static create(config: PlayerConfig) {
+    const instance = new Player(config)
+    instance.createWaveSurfer()
+    instance.createPCMPlayer()
+    instance.createDownloadButton()
+    return instance
+  }
+}

wavesurfer/recorder.ts

@@ -0,0 +1,182 @@
+// Copyright (c) Zhendong Peng
+// Distributed under the terms of the Modified BSD License.
+
+import WaveSurfer, { WaveSurferOptions } from 'wavesurfer.js'
+import RecordPlugin, { RecordPluginOptions } from 'wavesurfer.js/dist/plugins/record.js'
+
+import Player, { PlayerConfig } from './player'
+import { createElement, formatTime } from './utils'
+
+interface RecorderConfig {
+  options: WaveSurferOptions
+  language?: string
+  recordOptions?: RecordPluginOptions
+}
+
+export default class Recorder {
+  public el: HTMLDivElement
+  private _container: HTMLDivElement
+  private _currentTime: HTMLDivElement
+  private _wavesurfer: WaveSurfer
+  private _config: RecorderConfig
+  private _recorder: RecordPlugin
+  private _micSelect: HTMLSelectElement
+  private _rateSelect: HTMLSelectElement
+  private _recordButton: HTMLButtonElement
+  private _pauseButton: HTMLButtonElement
+  private _player: Player
+
+  constructor(config: RecorderConfig, playerConfig: PlayerConfig) {
+    this.el = createElement('div', 'lm-Widget')
+    this._container = createElement('div', 'waveform')
+    this._currentTime = createElement('div', 'time', '0:00')
+    this._container.append(this._currentTime)
+    this._config = config
+    this._player = Player.create(playerConfig)
+  }
+
+  get sampleRate() {
+    return this._wavesurfer.options.sampleRate
+  }
+
+  set sampleRate(rate: number) {
+    this._wavesurfer.options.sampleRate = rate
+    this._player.sampleRate = rate
+  }
+
+  createWaveSurfer() {
+    this._wavesurfer = WaveSurfer.create({
+      ...this._config.options,
+      container: this._container,
+    })
+  }
+
+  createRateSelect() {
+    this._rateSelect = createElement('select', 'form-select-sm d-inline-block me-3 my-3 w-25')
+    const rates = [8000, 16000, 22050, 24000, 44100, 48000]
+    rates.forEach((rate: number) => {
+      const option = document.createElement('option')
+      option.value = rate.toString()
+      option.text = `${rate} Hz`
+      if (rate === 16000) {
+        option.selected = true
+      }
+      this._rateSelect.appendChild(option)
+    })
+  }
+
+  createMicSelect() {
+    this._micSelect = createElement('select', 'form-select-sm d-inline-block me-3 my-3 w-50')
+    navigator.mediaDevices
+      .getUserMedia({ audio: true, video: false })
+      .then((stream) => {
+        RecordPlugin.getAvailableAudioDevices().then((devices: MediaDeviceInfo[]) => {
+          devices.forEach((device: MediaDeviceInfo) => {
+            const option = document.createElement('option')
+            option.value = device.deviceId
+            option.text = device.label || device.deviceId
+            this._micSelect.appendChild(option)
+          })
+        })
+      })
+      .catch((err) => {
+        const label = this._config.language === 'zh' ? '访问麦克风失败' : 'Error accessing the microphone: '
+        throw new Error(label + (err as Error).message)
+      })
+  }
+
+  createPauseButton() {
+    this._pauseButton = createElement('button', 'btn btn-outline-danger me-3 my-3', '<i class="fa fa-pause"></i>')
+    this._pauseButton.disabled = true
+    this._pauseButton.onclick = () => {
+      if (this._recorder.isRecording()) {
+        this._recorder.pauseRecording()
+        this._pauseButton.innerHTML = '<i class="fa fa-play"></i>'
+        this._container.style.display = 'none'
+        this._player.el.style.display = 'block'
+      } else {
+        this._recorder.resumeRecording()
+        this._pauseButton.innerHTML = '<i class="fa fa-pause"></i>'
+        this._container.style.display = 'block'
+        this._player.el.style.display = 'none'
+      }
+    }
+  }
+
+  createRecordButton() {
+    this._recordButton = createElement('button', 'btn btn-danger me-3 my-3', '<i class="fa fa-microphone"></i>')
+    this._recordButton.onclick = () => {
+      if (this._recorder.isRecording() || this._recorder.isPaused()) {
+        this._recorder.stopRecording()
+        this._pauseButton.disabled = true
+        this._pauseButton.innerHTML = '<i class="fa fa-play"></i>'
+        this._recordButton.innerHTML = '<i class="fa fa-microphone"></i>'
+        this._container.style.display = 'none'
+        this._player.el.style.display = 'block'
+      } else {
+        this._wavesurfer.options.normalize = false
+        this.sampleRate = parseInt(this._rateSelect.value)
+        this._recorder.startRecording({ deviceId: this._micSelect.value }).then(() => {
+          this._pauseButton.disabled = false
+          this._pauseButton.innerHTML = '<i class="fa fa-pause"></i>'
+          this._recordButton.innerHTML = '<i class="fa fa-stop"></i>'
+          this._container.style.display = 'block'
+          this._player.el.style.display = 'none'
+        })
+      }
+    }
+  }
+
+  onRecordStart(callback: () => void) {
+    this._recorder.on('record-start', () => {
+      callback()
+    })
+  }
+
+  onRecordChunk(callback: (blob: Blob) => void) {
+    this._recorder.on('record-data-available', (blob) => {
+      callback(blob)
+    })
+  }
+
+  onRecordEnd(callback: (blob: Blob) => void) {
+    this._recorder.on('record-end', (blob) => {
+      this._player.load(URL.createObjectURL(blob))
+      callback(blob)
+    })
+  }
+
+  createRecorder() {
+    this._wavesurfer.toggleInteraction(false)
+    this._recorder = this._wavesurfer.registerPlugin(RecordPlugin.create(this._config.recordOptions))
+    this.createRateSelect()
+    this.createMicSelect()
+    this.createPauseButton()
+    this.createRecordButton()
+    this._container.style.display = 'none'
+    this._player.el.style.display = 'none'
+    this.el.append(
+      this._recordButton,
+      this._pauseButton,
+      this._rateSelect,
+      this._micSelect,
+      this._container,
+      this._player.el,
+    )
+
+    this._recorder.on('record-pause', (blob) => {
+      this._player.load(URL.createObjectURL(blob))
+    })
+
+    this._recorder.on('record-progress', (time) => {
+      this._currentTime.textContent = formatTime(time / 1000)
+    })
+  }
+
+  static create(config: RecorderConfig, playerConfig: PlayerConfig) {
+    const instance = new Recorder(config, playerConfig)
+    instance.createWaveSurfer()
+    instance.createRecorder()
+    return instance
+  }
+}

wavesurfer/utils.ts

@@ -0,0 +1,137 @@
+// Copyright (c) Zhendong Peng
+// Distributed under the terms of the Modified BSD License.
+
+export const createElement = <T extends HTMLElement>(
+  tagName: keyof HTMLElementTagNameMap,
+  className: string,
+  innerHTML: string = '',
+): T => {
+  const element = document.createElement(tagName) as T
+  element.className = className
+  element.innerHTML = innerHTML
+  return element
+}
+
+export const formatTime = (seconds: number) => {
+  const minutes = Math.floor(seconds / 60)
+  const secondsRemainder = Math.round(seconds) % 60
+  const paddedSeconds = `0${secondsRemainder}`.slice(-2)
+  return `${minutes}:${paddedSeconds}`
+}
+
+function getWavHeader(options: {
+  numFrames: number
+  numChannels?: number
+  sampleRate?: number
+  isFloat?: boolean
+}): Uint8Array {
+  const numFrames = options.numFrames
+  const numChannels = options.numChannels || 2
+  const sampleRate = options.sampleRate || 44100
+  const bytesPerSample = options.isFloat ? 4 : 2
+  const format = options.isFloat ? 3 : 1
+  const blockAlign = numChannels * bytesPerSample
+  const byteRate = sampleRate * blockAlign
+  const dataSize = numFrames * blockAlign
+  const buffer = new ArrayBuffer(44)
+  const dv = new DataView(buffer)
+  let p = 0
+  function writeString(s: string) {
+    for (let i = 0; i < s.length; i++) {
+      dv.setUint8(p + i, s.charCodeAt(i))
+    }
+    p += s.length
+  }
+  function writeUint32(d: number) {
+    dv.setUint32(p, d, true)
+    p += 4
+  }
+  function writeUint16(d: number) {
+    dv.setUint16(p, d, true)
+    p += 2
+  }
+  writeString('RIFF') // ChunkID
+  writeUint32(dataSize + 36) // ChunkSize
+  writeString('WAVE') // Format
+  writeString('fmt ') // Subchunk1ID
+  writeUint32(16) // Subchunk1Size
+  writeUint16(format) // AudioFormat https://i.stack.imgur.com/BuSmb.png
+  writeUint16(numChannels) // NumChannels
+  writeUint32(sampleRate) // SampleRate
+  writeUint32(byteRate) // ByteRate
+  writeUint16(blockAlign) // BlockAlign
+  writeUint16(bytesPerSample * 8) // BitsPerSample
+  writeString('data') // Subchunk2ID
+  writeUint32(dataSize) // Subchunk2Size
+  return new Uint8Array(buffer)
+}
+
+function interleaveChannels(buffer: AudioBuffer): Int16Array {
+  const { numberOfChannels, length } = buffer
+  const pcmData = new Int16Array(length * numberOfChannels)
+  for (let channel = 0; channel < numberOfChannels; channel++) {
+    const data = buffer.getChannelData(channel)
+    const isFloat = data instanceof Float32Array
+    for (let i = 0; i < length; i++) {
+      // convert float32 to int16
+      pcmData[i * numberOfChannels + channel] = isFloat ? data[i] * 32767 : data[i]
+    }
+  }
+  return pcmData
+}
+
+function getWavBytes(
+  buffer: ArrayBuffer | AudioBuffer | null,
+  options: { numChannels: number; sampleRate: number },
+): Uint8Array {
+  if (!buffer) {
+    return new Uint8Array()
+  }
+
+  let headerBytes: Uint8Array
+  let pcmData: Uint8Array
+
+  if (buffer instanceof ArrayBuffer) {
+    headerBytes = getWavHeader({
+      isFloat: false,
+      numChannels: options.numChannels,
+      sampleRate: options.sampleRate,
+      numFrames: buffer.byteLength / Int16Array.BYTES_PER_ELEMENT,
+    })
+    pcmData = new Uint8Array(buffer)
+  } else {
+    headerBytes = getWavHeader({
+      isFloat: false,
+      numChannels: buffer.numberOfChannels,
+      sampleRate: buffer.sampleRate,
+      numFrames: buffer.length,
+    })
+    pcmData = new Uint8Array(interleaveChannels(buffer).buffer)
+  }
+  const wavBytes = new Uint8Array(headerBytes.length + pcmData.length)
+  wavBytes.set(headerBytes, 0)
+  wavBytes.set(pcmData, headerBytes.length)
+
+  return wavBytes
+}
+
+export const createObjectURL = (
+  buffer: ArrayBuffer | AudioBuffer | null,
+  options: { numChannels: number; sampleRate: number } = {
+    numChannels: 1,
+    sampleRate: 44100,
+  },
+): string => {
+  let wavBytes: Uint8Array
+
+  if (buffer instanceof AudioBuffer) {
+    wavBytes = getWavBytes(buffer, {
+      numChannels: buffer.numberOfChannels,
+      sampleRate: buffer.sampleRate,
+    })
+  } else {
+    wavBytes = getWavBytes(buffer, options)
+  }
+
+  return URL.createObjectURL(new Blob([wavBytes], { type: 'audio/wav' }))
+}