Last active
September 3, 2023 07:59
-
-
Save katspaugh/285d11a0b6347643837e45255ebe7faa 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
| /* | |
| <html> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Tsunami_by_hokusai_19th_century.jpg/2880px-Tsunami_by_hokusai_19th_century.jpg" width="300" /> | |
| <p>Drag the blue line to change the image opacity 👇</p> | |
| </html> | |
| */ | |
| import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js' | |
| import EnvelopePlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/envelope.esm.js' | |
| class ImageMedia extends Audio { | |
| constructor(img) { | |
| super('') | |
| this.img = img | |
| } | |
| get volume() { | |
| return Number(this.img.style.opacity) | |
| } | |
| set volume(value) { | |
| this.img.style.opacity = Math.round(value * 1000) / 1000 | |
| } | |
| get duration() { | |
| return 20 | |
| } | |
| } | |
| const media = new ImageMedia(document.querySelector('img')) | |
| const wavesurfer = WaveSurfer.create({ | |
| container: document.body, | |
| media, | |
| peaks: new Array(1000).fill(0.01), | |
| duration: 20, | |
| interact: false, | |
| }) | |
| const envelope = wavesurfer.registerPlugin( | |
| EnvelopePlugin.create({ | |
| points: [ | |
| { | |
| time: 0, | |
| volume: 0.9, | |
| }, | |
| { | |
| time: 20, | |
| volume: 0.9, | |
| }, | |
| ], | |
| }), | |
| ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment