2b:null 2c:["$","title",null,{"children":"Wave Surfer Regions | Brett Cooper | Observable"}] 31:T50a,# todo add buttons and sliders and colour selects to these. ## UI changes - `wavesurfer.setBackgroundColor(color)` – Sets the background color of the waveform container. - `wavesurfer.setCursorColor(color)` – Sets the fill color of the cursor indicating the playhead position. - `wavesurfer.setProgressColor(color)` – Sets the fill color of the waveform behind the cursor. - `wavesurfer.setWaveColor(color)` – Sets the fill color of the waveform after the cursor. - `wavesurfer.setHeight(height)` – Sets the height of the waveform. ## Adjust Play - `wavesurfer.setPlaybackRate(rate)` – Sets the speed of playback (0.5 is half speed, 1 is normal speed, 2 is double speed and so on). - `wavesurfer.setVolume(newVolume)` – Sets the playback volume to a new value [0..1] (0 = silent, 1 = maximum). - `wavesurfer.setPlayEnd(position)` – Sets set a point in seconds for playback to stop at. - `wavesurfer.setMute(mute)` – Mute the current sound. Can be a boolean value of *true* to mute sound or *false* to unmute More TODOs Have a different colour for each region. The minLength needs to be define too, to match region.end - region.start (could have issues if zoomed out due to edge/border of region) Add an export regions button and maybe save it to local storage. ---32:T1b51,# Regions

**[Regions](https://wavesurfer-js.org/plugins/regions.html) are visual overlays on waveform that can be used to play and loop portions of audio. Regions can be dragged and resized.** https://wavesurfer-js.org/api/typedef/index.html#static-typedef-RegionParams https://wavesurfer-js.org/api/typedef/index.html#static-typedef-RegionsPluginParams wavesurfer [annotation](https://wavesurfer-js.org/example/annotation/index.html) example also lists region usage. ## Simple wavesurfer [example](https://wavesurfer-js.org/example/regions/index.html): ```js var wavesurfer = WaveSurfer.create({ container: document.querySelector('#waveform'), waveColor: '#A8DBA8', progressColor: '#3B8686', backend: 'MediaElement', plugins: [ regions.create({ regionsMinLength: 2, regions: [ { start: 1, // in seconds end: 3, loop: false, color: 'hsla(400, 100%, 30%, 0.5)' }, { start: 5, end: 7, loop: false, color: 'hsla(200, 50%, 70%, 0.4)', minLength: 1, } ], dragSelection: { slop: 5 } }) ] }); ```
**If I was to save new regions then I would have to build and object like `regions.create()` in *plugins:* options.** ### Region events: > - `region-in` – When playback enters a region. Callback will receive the `Region` object. - `region-out`– When playback leaves a region. Callback will receive the `Region` object. - `region-mouseenter` - When the mouse moves over a region. Callback will receive the `Region` object, and a `MouseEvent` object. - `region-mouseleave` - When the mouse leaves a region. Callback will receive the `Region` object, and a `MouseEvent` object. - `region-click` - When the mouse clicks on a region. Callback will receive the `Region` object, and a `MouseEvent` object. - `region-dblclick` - When the mouse double-clicks on a region. Callback will receive the `Region` object, and a `MouseEvent` object. - `region-created` – When a region is created. Callback will receive the `Region` object. - `region-updated` – When a region is updated. Callback will receive the `Region` object. - `region-update-end` – When dragging or resizing is finished. Callback will receive the `Region` object. - `region-removed` – When a region is removed. Callback will receive the `Region` object. #### event adding - `wavesurfer.on(eventName, callback)` – Subscribes to an event. - `wavesurfer.un(eventName, callback)` – Unsubscribes from an event. ```js wavesurfer.on('region-click', function(region, e) { e.stopPropagation(); region.loop = false; // set region to not loop by default // Play on click, loop on shift click e.shiftKey ? region.playLoop() : region.play(); }); ```
### Regions Plugin > Regions are visual overlays on waveform that can be used to play and loop portions of audio. Regions can be dragged and resized. > Visual customization is possible via CSS (using the selectors `.wavesurfer-region` and `.wavesurfer-handle`). > To enable the plugin, add the script `plugin/wavesurfer.regions.js` to your page. > After doing that, use `wavesurfer.addRegion()` to create Region objects. ### Exposed Methods > * `addRegion(options)` – Creates a region on the waveform. Returns a `Region` object. See [Region Options](#region-options), [Region Methods](#region-methods) and [Region Events](#region-events) below. * **Note:** *You cannot add regions until the audio has finished loading*, otherwise the `start:` and `end:` properties of the new region will be set to `0`, or an unexpected value. * `clearRegions()` – Removes all regions. * `enableDragSelection(options)` – Lets you create regions by selecting. areas of the waveform with mouse. `options` are Region objects' params (see [below](#region-options)). * `disableDragSelection()` - **Disables ability to create regions.** ### Region Options > - `id` (string) random: The id of the region. - `start` (float) `0`: The start position of the region (in seconds). - `end` (float) `0`: The end position of the region (in seconds). - `loop` (boolean) `false:` Whether to loop the region when played back. - `drag` (boolean) `true`: Allow/disallow dragging the region. - `resize` (boolean) `true`: Allow/disallow resizing the region. - `color` (string) `"rgba(0, 0, 0, 0.1)"`: HTML color code. - `minLength` (number) null: Optional minimum length for the region (in seconds). - `maxLength` (number) null: Optional maximum length for the region (in seconds). ### Region Methods > * `update(region_options)` - Modify the settings of the region. See options above, can be an empty string'' * `play()` - Play the audio region from the *start* to *end* position. * `playLoop()` - plays the region on a loop. * `remove()` - Remove the region object. * `onDrag(timeInSeconds)` - adds timeInSeconds to the *start* and *end* params. * `onResize(timeInSeconds, 'start')` - Adds timeInSeconds to *end* by default. The optional parameter 'start' will add timeInSeconds to *start*. ### Region Events > **General events:** * `in` - When playback enters the region. * `out` - When playback leaves the region. * `remove` - Happens just before the region is removed. * `update` - When the region's options are updated. * `update-end` - When dragging or resizing is finished. > **Mouse events:** * `click` - When the mouse clicks on the region. Callback will receive a *MouseEvent*. * `dblclick` - When the mouse double-clicks on the region. Callback will receive a *MouseEvent*. * `over` - When mouse moves over the region. Callback will receive a *MouseEvent*. * `leave` - When mouse leaves the region. Callback will receive a *MouseEvent*. [API Regions Plugin](https://wavesurfer-js.org/api/class/src/plugin/regions/index.js~RegionsPlugin.html) ## Method Summary Public Methods - `add(params: object)` returns (The created region object) Add a region, region parameters object - `clear()` Remove all regions - `destroy()` - `disableDragSelection()` - `enableDragSelection(params: *)` - `getCurrentRegion()` returns (Region) Get current region, The smallest region that contains the current time. If several such regions exist, take the first. Return null if none exist. - `getRegionSnapToGridValue(value: number, params: Object)` returns (number) Match the value to the grid, if required. If the regions plugin params have a snapToGridInterval set, return the value matching the nearest grid interval. If no snapToGridInterval is set, the passed value will be returned without modification. `value:` (number) the value to snap to the grid, if needed `params:` (object) the regions plugin pramas - `init()`
33:T49b,wavesurfer = { d3.select('#wavDiv > wave').remove() // delete the wave displayed let ws = WaveSurfer.create({ container: '#wavDiv', waveColor: '#048BA8', progressColor: '#F2CE4C', cursorColor: '#A4036F', cursorWidth: 1, height: 300, scrollParent: true, // hideScrollbar: true, plugins: [ cursor.create({ showTime: true, opacity: 1, customShowTimeStyle: { 'background-color': '#004', // can't use alpha channel rgba(0, 0, 4, 0.2) as the text doesn't get complely cleared color: '#ffa', padding: '2px', 'font-size': '12px' } }), regions.create({ regionsMinLength: 0.5, regions: [ { start: 0, end: 20.5, loop: false, color: 'hsla(300, 100%, 30%, 0.5)', minLength: 1, }, { start: 32, end: 50, loop: false, color: 'hsla(500, 50%, 70%, 0.4)', minLength: 1, } ], dragSelection: { slop: 5 } }) ] }); ws.load(audioURL) return ws}34:[{"id":"6c8bff412077b1826a8707489eccca17919ddd934cdfa28e7f39cfd7f1e15a1a80f3c406b5efd225d626770056dcb6d4d7cfd297081c1d614315ed0caab98db4","href":"https://static.observableusercontent.com/files/6c8bff412077b1826a8707489eccca17919ddd934cdfa28e7f39cfd7f1e15a1a80f3c406b5efd225d626770056dcb6d4d7cfd297081c1d614315ed0caab98db4","name":"Trish Mar 13a.mp3","type":"audio/mpeg","lastModified":1631074587856.401,"size":2174615}] 2f:{"id":"4dfcf6c8287bfa80","slug":"wave-surfer-regions","title":"Wave Surfer Regions","thumbnail":"71f7240c2b324f9f86493ec81eb6f165907bf66114694dfd65a7283d0b305e6d","access_level":"public","create_time":"$D2021-09-08T04:16:27.856Z","update_time":"$D2021-09-17T17:49:56.941Z","view_time":null,"first_public_time":"$D2021-09-11T04:36:15.012Z","fork":{"id":"800286024dcb2680","slug":"wave-surfer","title":"Wave Surfer","owner":{"id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper"}},"stars":3,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":1880,"publish_version":1880,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Wave Surfer Regions","cells":[{"id":0,"value":"\n# Wave Surfer Regions\n

\nThis is a look at the WaveSurfer regions plug in. \nRegions can be add, resize, move and removed.\n\nClicking on a region plays it once. \nShift + Clicking on a region plays it on loop. \nCTRL + Clicking on a region removes the region. \n\nChecking out: https://wavesurfer-js.org/ - https://github.com/katspaugh/wavesurfer.js\n\n- https://wavesurfer-js.org/docs/methods.html\n- https://wavesurfer-js.org/docs/options.html\n- https://wavesurfer-js.org/docs/events.html\n\n\n# Plugins used:\n\nhttps://wavesurfer-js.org/plugins/ - https://github.com/katspaugh/wavesurfer.js/tree/master/src/plugin\n\n- [Regions plugin](https://wavesurfer-js.org/plugins/regions.html):\nAdds ability to display and interact with audio regions. Regions are visual overlays that can be resized and dragged around the waveform. You can play back and loop a region.\n\n\n- [Cursor plugin](https://wavesurfer-js.org/plugins/cursor.html):\nShows a cursor on your waveform with time position. \n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"WaveForm \n

\n \n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"viewof zoom = Object.assign(Inputs.range([0, 500], {value: 0, label: \"Zoom\", step: 1 }), {\n oninput: event => event.isTrusted && event.stopImmediatePropagation(),\n onchange: event => event.currentTarget.dispatchEvent(new Event(\"input\"))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1863,"value":"viewof playSpeed = Object.assign(Inputs.range([0.7, 1], {value: 1, label: \"Play Back Speed\", step: 0.1 }), {\n oninput: event => event.isTrusted && event.stopImmediatePropagation(),\n onchange: event => event.currentTarget.dispatchEvent(new Event(\"input\"))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"wavesurfer.getVolume() // add slider to setVolume","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1860,"value":"playSpeed_function = // update volume level\nwavesurfer.setPlaybackRate(playSpeed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"zoom_function = // update zoom level\nwavesurfer.zoom(zoom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1475,"value":"wavesurfer.on('region-click', function(region, e) {\n e.stopPropagation();\n region.loop = false; // set region to not loop by default\n\n // if ctrl key pressed delete region\n // Play on click and Play_loop on shift click\n e.ctrlKey ? region.remove() : e.shiftKey ? region.playLoop() : region.play();\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"wavesurfer.on('region-created', function(region, e) {\n region.color = 'rgba(0, 200, 0, 0.1)'\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1642,"value":"// wavesurfer.un('region-created', function(region, e) { // remove event\n// region.color = 'rgba(0, 200, 0, 0.1)'\n// });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1871,"value":"{\n now\n return wavesurfer.getCurrentTime() \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1872,"value":"wavesurfer.setPlaybackRate(1) // add slider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1874,"value":"wavesurfer.getDuration() // needs to wait until mp3 is loaded","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1876,"value":"wavesurfer.getPlaybackRate() // show playback rate","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1878,"value":"wavesurfer.getVolume() // add slider to setVolume","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"\n# Clicked and Other region data\n

\n\nwavesurfer.regions.list returns all the region objects. They have a unique name wavesurfer_random\n\nThese region objects can be edited and then updated.\n\n```js\nwavesurfer.regions.list[${regies[0]}].start=30\nwavesurfer.regions.list[${regies[0]}].end=60\nwavesurfer.regions.list[${regies[0]}].update('')\n```\nonResize(timeInSeconds, 'start') - Adds timeInSeconds to end by default. Value can be -/+. \nThe optional parameter 'start' will add timeInSeconds to start.\n```js\nwavesurfer.regions.list[${regies[0]}].onResize(10, 'start') // adds to start (reducing the region size)\nwavesurfer.regions.list[${regies[0]}].onResize(20) // adds to end\n```\n\nmove the region by 5 seconds\n```js\nwavesurfer.regions.list[${regies[0]}].onDrag(5)\n```\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"if saving a region then it needs to be structured like the the plug-ins `regions.create(array[{objects}]`.\n\n#### Region Options that are useful:\n\n> - `start` (float) `0`: The start position of the region (in seconds).\n- `end` (float) `0`: The end position of the region (in seconds).\n- `loop` (boolean) `false:` Whether to loop the region when played back.\n- `drag` (boolean) `true`: Allow/disallow dragging the region.\n- `resize` (boolean) `true`: Allow/disallow resizing the region.\n\nI need to read the start and end of each region, the loop, drag and resize would default to false","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"wavesurfer.regions.list // list the current regions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"regies = Object.keys(wavesurfer.regions.list) // should not start playing....","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1838,"value":"regionsJSON = {\n\n let regs = []\n for (let index = 0; index < regies.length; index++) {\n \n regs.push({ \n start: wavesurfer.regions.list[regies[index]].start,\n end: wavesurfer.regions.list[regies[index]].end,\n loop: false,\n drag: false,\n resize: false\n })\n }\n return regs\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1418,"value":"// wavesurfer.regions.list[regies[0]].start=40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"// wavesurfer.regions.list[regies[0]].end=60\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"// wavesurfer.regions.list[regies[0]].update('')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"// wavesurfer.regions.list[regies[0]].onResize(10, 'start') ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"// wavesurfer.regions.list[regies[0]].onResize(10) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"// wavesurfer.regions.list[regies[0]].onDrag(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1468,"value":"// wavesurfer.regions.list[regies[0]].playLoop()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"// wavesurfer.clearRegions()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"controlButtons = { \n d3.select('#playb').on('click',() => wavesurfer.playPause())\n d3.select('#pauseb').on('click',() => wavesurfer.pause())\n d3.select('#stopb').on('click',() => wavesurfer.stop()) \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"audioURL = await FileAttachment(\"Trish Mar 13a.mp3\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"WaveSurfer = require(\"https://unpkg.com/wavesurfer.js/dist/wavesurfer.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"regions = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"cursor = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.cursor.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"markers = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.markers.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"# Cursor Plugin [Example](https://wavesurfer-js.org/example/cursor/index.html)\n

\nhttps://wavesurfer-js.org/plugins/cursor.html\n\nhttps://wavesurfer-js.org/api/class/src/plugin/cursor/index.js~CursorPlugin.html\n\n\n```js\nlet wavesurfer = WaveSurfer.create({\n container: document.querySelector('#waveform'),\n plugins: [\n cursor.create({\n showTime: true,\n opacity: 1,\n customShowTimeStyle: {\n 'background-color': '#004',\n color: '#ffa',\n padding: '2px',\n 'font-size': '12px'\n }\n })\n ]\n});\n```\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"