Created
September 4, 2023 17:39
-
-
Save katspaugh/2528031296bc33df1e07fb2573042d7a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Record plugin | |
| import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js' | |
| import RecordPlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/record.esm.js' | |
| // Create an instance of WaveSurfer | |
| const wavesurfer = WaveSurfer.create({ | |
| container: '#mic', | |
| waveColor: 'rgb(200, 0, 200)', | |
| progressColor: 'rgb(100, 0, 100)', | |
| renderFunction: (channels, ctx) => { | |
| const { width, height } = ctx.canvas | |
| const gradient = ctx.createLinearGradient(0, 0, width, height) | |
| gradient.addColorStop(0, 'green') | |
| gradient.addColorStop(0.75, 'yellow') | |
| gradient.addColorStop(1, 'red') | |
| const maxVolume = Math.max.apply(Math, channels[0]) | |
| ctx.fillStyle = gradient | |
| ctx.fillRect(0, 0, width * maxVolume, height) | |
| } | |
| }) | |
| // Initialize the Record plugin | |
| const record = wavesurfer.registerPlugin(RecordPlugin.create()) | |
| // Render recorded audio | |
| record.on('record-end', (blob) => { | |
| const container = document.querySelector('#recordings') | |
| const recordedUrl = URL.createObjectURL(blob) | |
| // Create wavesurfer from the recorded audio | |
| const wavesurfer = WaveSurfer.create({ | |
| container, | |
| waveColor: 'rgb(200, 100, 0)', | |
| progressColor: 'rgb(100, 50, 0)', | |
| url: recordedUrl, | |
| }) | |
| // Play button | |
| const button = container.appendChild(document.createElement('button')) | |
| button.textContent = 'Play' | |
| button.onclick = () => wavesurfer.playPause() | |
| wavesurfer.on('pause', () => (button.textContent = 'Play')) | |
| wavesurfer.on('play', () => (button.textContent = 'Pause')) | |
| // Download link | |
| const link = container.appendChild(document.createElement('a')) | |
| Object.assign(link, { | |
| href: recordedUrl, | |
| download: 'recording.' + blob.type.split(';')[0].split('/')[1] || 'webm', | |
| textContent: 'Download recording', | |
| }) | |
| }) | |
| { | |
| // Record button | |
| const recButton = document.querySelector('#record') | |
| recButton.onclick = () => { | |
| if (record.isRecording()) { | |
| record.stopRecording() | |
| recButton.textContent = 'Record' | |
| return | |
| } | |
| recButton.disabled = true | |
| record.startRecording().then(() => { | |
| recButton.textContent = 'Stop' | |
| recButton.disabled = false | |
| }) | |
| } | |
| } | |
| /* | |
| <html> | |
| <h1 style="margin-top: 0">Press Record to start recording 🎙️</h1> | |
| <p> | |
| 📖 <a href="https://wavesurfer-js.org/docs/classes/plugins_record.RecordPlugin">Record plugin docs</a> | |
| </p> | |
| <button id="record">Record</button> | |
| <div id="mic" style="border: 1px solid #ddd; border-radius: 4px; margin-top: 1rem"></div> | |
| <div id="recordings" style="margin: 1rem 0"></div> | |
| <style> | |
| button { | |
| min-width: 5rem; | |
| margin: 1rem 1rem 1rem 0; | |
| } | |
| </style> | |
| </html> | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment