katspaugh/table.js

## table.js
// American English vowels

import WaveSurfer from 'wavesurfer.js'
import Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.esm.js'

// Sounds generated with `say -v 'Reed (English (US))' word`
const vowels = ['i', 'ɪ', 'ɛ', 'æ', 'ɑ', 'ɔ', 'o', 'ʊ', 'u', 'ʌ', 'ə', 'ɝ']
const files = ['ee', 'ih', 'hen', 'hat', 'ah', 'hot', 'oh', 'hook', 'oo', 'uh', 'ahoy', 'er']

const table = document.querySelector('table')
let row
const containers = vowels.map((vowel, index) => {
  if (index % 3 === 0) {
    row = document.createElement('tr')
    table.appendChild(row)
  }
  const td = document.createElement('td')
  td.textContent = `[ ${vowel} ]`
  return row.appendChild(td)
})

containers.forEach((vowelDiv, idx) => {
  const wavesurfer = WaveSurfer.create({
    container: vowelDiv,
    height: 50,
    hideScrollbar: true,
    waveColor: 'rgb(200, 0, 200)',
    progressColor: 'rgb(100, 0, 100)',
    url: `/examples/audio/${files[idx]}.mp4`,
    sampleRate: 14600,
    interact: false,
    plugins: [
      Spectrogram.create({
        labels: true,
        labelsColor: 'currentColor',
        labelsBackground: 'transparent',
        height: 150,
      }),
    ],
  })

  wavesurfer.on('ready', () => {
    vowelDiv.onclick = () => {
      wavesurfer.playPause()
    }
  })
})

/*
<html>
  <table style="width: 100%"></table>
</html>
*/
	// American English vowels

	import WaveSurfer from 'wavesurfer.js'
	import Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.esm.js'

	// Sounds generated with `say -v 'Reed (English (US))' word`
	const vowels = ['i', 'ɪ', 'ɛ', 'æ', 'ɑ', 'ɔ', 'o', 'ʊ', 'u', 'ʌ', 'ə', 'ɝ']
	const files = ['ee', 'ih', 'hen', 'hat', 'ah', 'hot', 'oh', 'hook', 'oo', 'uh', 'ahoy', 'er']

	const table = document.querySelector('table')
	let row
	const containers = vowels.map((vowel, index) => {
	if (index % 3 === 0) {
	row = document.createElement('tr')
	table.appendChild(row)
	}
	const td = document.createElement('td')
	td.textContent = `[ ${vowel} ]`
	return row.appendChild(td)
	})

	containers.forEach((vowelDiv, idx) => {
	const wavesurfer = WaveSurfer.create({
	container: vowelDiv,
	height: 50,
	hideScrollbar: true,
	waveColor: 'rgb(200, 0, 200)',
	progressColor: 'rgb(100, 0, 100)',
	url: `/examples/audio/${files[idx]}.mp4`,
	sampleRate: 14600,
	interact: false,
	plugins: [
	Spectrogram.create({
	labels: true,
	labelsColor: 'currentColor',
	labelsBackground: 'transparent',
	height: 150,
	}),
	],
	})

	wavesurfer.on('ready', () => {
	vowelDiv.onclick = () => {
	wavesurfer.playPause()
	}
	})
	})

	/*
	<html>
	<table style="width: 100%"></table>
	</html>
	*/