bar-height.js

// Customized Timeline plugin

import WaveSurfer from 'wavesurfer.js'
import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'

// Create a timeline plugin instance with custom options
const topTimeline = TimelinePlugin.create({
  height: 20,
  insertPosition: 'beforebegin',
})

// Create a transcript wrapper
const transcriptWrapper = document.createElement('div')
transcriptWrapper.textContent = 'And she said uhm and he said hmm and she said oh and he said yeah'

// Create an instance of WaveSurfer
const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
  minPxPerSec: 20,
  barHeight: 0.7,
  plugins: [topTimeline],
})

wavesurfer.once('ready', () => {
  wavesurfer.getWrapper().appendChild(transcriptWrapper)
})