1import { B as Block } from './Button-4603580c.js'; 2import { u as uploadToHuggingFace } from './utils-8f25e669.js'; 3import { B as BlockLabel } from './BlockLabel-29e86818.js'; 4import { I as IconButton } from './IconButton-a83f4ef3.js'; 5import { E as Empty } from './Empty-e2e0272e.js'; 6import { S as ShareButton } from './ShareButton-0349c9cf.js'; 7import { D as Download } from './Download-ea83bae3.js'; 8import { S as Static } from './Index-1fd72dbe.js'; 9import { a as Play, P as Pause, T as Trim, S as SelectSource } from './SelectSource-04a84021.js'; 10import { U as Undo } from './Undo-6c110254.js'; 11import { r as resolve_wasm_src } from './file-url-7e88bc31.js'; 12import { _ as __vitePreload, p as prepare_files, u as upload, n as normalise_file } from './index-a4a7fd54.js'; 13import { U as Upload } from './Upload-5eb3d513.js'; 14import { M as ModifyUpload } from './ModifyUpload-2d323204.js'; 15import { U as UploadText } from './UploadText-c5b17877.js'; 16export { default as BaseExample } from './Example-01f23d62.js'; 17import './Upload-8f4bfd80.js'; 18import './svelte/svelte.js'; 19/* empty css */import './Clear-9760deed.js'; 20 21/* home/runner/work/gradio/gradio/js/icons/src/Backward.svelte generated by Svelte v4.2.2 */ 22const { 23 SvelteComponent: SvelteComponent$f, 24 append: append$b, 25 attr: attr$c, 26 detach: detach$f, 27 init: init$f, 28 insert: insert$f, 29 noop: noop$a, 30 safe_not_equal: safe_not_equal$f, 31 svg_element: svg_element$5 32} = window.__gradio__svelte__internal; 33function create_fragment$f(ctx) { 34 let svg; 35 let path; 36 37 return { 38 c() { 39 svg = svg_element$5("svg"); 40 path = svg_element$5("path"); 41 attr$c(path, "stroke", "currentColor"); 42 attr$c(path, "stroke-width", "1.5"); 43 attr$c(path, "stroke-linecap", "round"); 44 attr$c(path, "stroke-linejoin", "round"); 45 attr$c(path, "d", "M21.044 5.704a.6.6 0 0 1 .956.483v11.626a.6.6 0 0 1-.956.483l-7.889-5.813a.6.6 0 0 1 0-.966l7.89-5.813ZM10.044 5.704a.6.6 0 0 1 .956.483v11.626a.6.6 0 0 1-.956.483l-7.888-5.813a.6.6 0 0 1 0-.966l7.888-5.813Z"); 46 attr$c(svg, "xmlns", "http://www.w3.org/2000/svg"); 47 attr$c(svg, "width", "24px"); 48 attr$c(svg, "height", "24px"); 49 attr$c(svg, "fill", "currentColor"); 50 attr$c(svg, "stroke-width", "1.5"); 51 attr$c(svg, "viewBox", "0 0 24 24"); 52 attr$c(svg, "color", "currentColor"); 53 }, 54 m(target, anchor) { 55 insert$f(target, svg, anchor); 56 append$b(svg, path); 57 }, 58 p: noop$a, 59 i: noop$a, 60 o: noop$a, 61 d(detaching) { 62 if (detaching) { 63 detach$f(svg); 64 } 65 } 66 }; 67} 68 69class Backward extends SvelteComponent$f { 70 constructor(options) { 71 super(); 72 init$f(this, options, null, create_fragment$f, safe_not_equal$f, {}); 73 } 74} 75 76/* home/runner/work/gradio/gradio/js/icons/src/Forward.svelte generated by Svelte v4.2.2 */ 77const { 78 SvelteComponent: SvelteComponent$e, 79 append: append$a, 80 attr: attr$b, 81 detach: detach$e, 82 init: init$e, 83 insert: insert$e, 84 noop: noop$9, 85 safe_not_equal: safe_not_equal$e, 86 svg_element: svg_element$4 87} = window.__gradio__svelte__internal; 88function create_fragment$e(ctx) { 89 let svg; 90 let path; 91 92 return { 93 c() { 94 svg = svg_element$4("svg"); 95 path = svg_element$4("path"); 96 attr$b(path, "stroke", "currentColor"); 97 attr$b(path, "stroke-width", "1.5"); 98 attr$b(path, "stroke-linecap", "round"); 99 attr$b(path, "stroke-linejoin", "round"); 100 attr$b(path, "d", "M2.956 5.704A.6.6 0 0 0 2 6.187v11.626a.6.6 0 0 0 .956.483l7.889-5.813a.6.6 0 0 0 0-.966l-7.89-5.813ZM13.956 5.704a.6.6 0 0 0-.956.483v11.626a.6.6 0 0 0 .956.483l7.889-5.813a.6.6 0 0 0 0-.966l-7.89-5.813Z"); 101 attr$b(svg, "xmlns", "http://www.w3.org/2000/svg"); 102 attr$b(svg, "width", "24px"); 103 attr$b(svg, "height", "24px"); 104 attr$b(svg, "fill", "currentColor"); 105 attr$b(svg, "stroke-width", "1.5"); 106 attr$b(svg, "viewBox", "0 0 24 24"); 107 attr$b(svg, "color", "currentColor"); 108 }, 109 m(target, anchor) { 110 insert$e(target, svg, anchor); 111 append$a(svg, path); 112 }, 113 p: noop$9, 114 i: noop$9, 115 o: noop$9, 116 d(detaching) { 117 if (detaching) { 118 detach$e(svg); 119 } 120 } 121 }; 122} 123 124class Forward extends SvelteComponent$e { 125 constructor(options) { 126 super(); 127 init$e(this, options, null, create_fragment$e, safe_not_equal$e, {}); 128 } 129} 130 131/* home/runner/work/gradio/gradio/js/icons/src/Music.svelte generated by Svelte v4.2.2 */ 132const { 133 SvelteComponent: SvelteComponent$d, 134 append: append$9, 135 attr: attr$a, 136 detach: detach$d, 137 init: init$d, 138 insert: insert$d, 139 noop: noop$8, 140 safe_not_equal: safe_not_equal$d, 141 svg_element: svg_element$3 142} = window.__gradio__svelte__internal; 143function create_fragment$d(ctx) { 144 let svg; 145 let path; 146 let circle0; 147 let circle1; 148 149 return { 150 c() { 151 svg = svg_element$3("svg"); 152 path = svg_element$3("path"); 153 circle0 = svg_element$3("circle"); 154 circle1 = svg_element$3("circle"); 155 attr$a(path, "d", "M9 18V5l12-2v13"); 156 attr$a(circle0, "cx", "6"); 157 attr$a(circle0, "cy", "18"); 158 attr$a(circle0, "r", "3"); 159 attr$a(circle1, "cx", "18"); 160 attr$a(circle1, "cy", "16"); 161 attr$a(circle1, "r", "3"); 162 attr$a(svg, "xmlns", "http://www.w3.org/2000/svg"); 163 attr$a(svg, "width", "100%"); 164 attr$a(svg, "height", "100%"); 165 attr$a(svg, "viewBox", "0 0 24 24"); 166 attr$a(svg, "fill", "none"); 167 attr$a(svg, "stroke", "currentColor"); 168 attr$a(svg, "stroke-width", "1.5"); 169 attr$a(svg, "stroke-linecap", "round"); 170 attr$a(svg, "stroke-linejoin", "round"); 171 attr$a(svg, "class", "feather feather-music"); 172 }, 173 m(target, anchor) { 174 insert$d(target, svg, anchor); 175 append$9(svg, path); 176 append$9(svg, circle0); 177 append$9(svg, circle1); 178 }, 179 p: noop$8, 180 i: noop$8, 181 o: noop$8, 182 d(detaching) { 183 if (detaching) { 184 detach$d(svg); 185 } 186 } 187 }; 188} 189 190class Music extends SvelteComponent$d { 191 constructor(options) { 192 super(); 193 init$d(this, options, null, create_fragment$d, safe_not_equal$d, {}); 194 } 195} 196 197/* home/runner/work/gradio/gradio/js/icons/src/VolumeLow.svelte generated by Svelte v4.2.2 */ 198const { 199 SvelteComponent: SvelteComponent$c, 200 append: append$8, 201 attr: attr$9, 202 detach: detach$c, 203 init: init$c, 204 insert: insert$c, 205 noop: noop$7, 206 safe_not_equal: safe_not_equal$c, 207 svg_element: svg_element$2, 208 text: text$7 209} = window.__gradio__svelte__internal; 210function create_fragment$c(ctx) { 211 let svg; 212 let title; 213 let t; 214 let path0; 215 let path1; 216 217 return { 218 c() { 219 svg = svg_element$2("svg"); 220 title = svg_element$2("title"); 221 t = text$7("Low volume"); 222 path0 = svg_element$2("path"); 223 path1 = svg_element$2("path"); 224 attr$9(path0, "d", "M19.5 7.5C19.5 7.5 21 9 21 11.5C21 14 19.5 15.5 19.5 15.5"); 225 attr$9(path0, "stroke-width", "1.5"); 226 attr$9(path0, "stroke-linecap", "round"); 227 attr$9(path0, "stroke-linejoin", "round"); 228 attr$9(path1, "d", "M2 13.8571V10.1429C2 9.03829 2.89543 8.14286 4 8.14286H6.9C7.09569 8.14286 7.28708 8.08544 7.45046 7.97772L13.4495 4.02228C14.1144 3.5839 15 4.06075 15 4.85714V19.1429C15 19.9392 14.1144 20.4161 13.4495 19.9777L7.45046 16.0223C7.28708 15.9146 7.09569 15.8571 6.9 15.8571H4C2.89543 15.8571 2 14.9617 2 13.8571Z"); 229 attr$9(path1, "stroke-width", "1.5"); 230 attr$9(svg, "width", "24"); 231 attr$9(svg, "height", "24"); 232 attr$9(svg, "viewBox", "0 0 24 24"); 233 attr$9(svg, "stroke-width", "1.5"); 234 attr$9(svg, "fill", "none"); 235 attr$9(svg, "xmlns", "http://www.w3.org/2000/svg"); 236 attr$9(svg, "stroke", "currentColor"); 237 attr$9(svg, "color", "currentColor"); 238 }, 239 m(target, anchor) { 240 insert$c(target, svg, anchor); 241 append$8(svg, title); 242 append$8(title, t); 243 append$8(svg, path0); 244 append$8(svg, path1); 245 }, 246 p: noop$7, 247 i: noop$7, 248 o: noop$7, 249 d(detaching) { 250 if (detaching) { 251 detach$c(svg); 252 } 253 } 254 }; 255} 256 257class VolumeLow extends SvelteComponent$c { 258 constructor(options) { 259 super(); 260 init$c(this, options, null, create_fragment$c, safe_not_equal$c, {}); 261 } 262} 263 264/* home/runner/work/gradio/gradio/js/icons/src/VolumeHigh.svelte generated by Svelte v4.2.2 */ 265const { 266 SvelteComponent: SvelteComponent$b, 267 append: append$7, 268 attr: attr$8, 269 detach: detach$b, 270 init: init$b, 271 insert: insert$b,
272 noop: noop$6, 273 safe_not_equal: safe_not_equal$b, 274 svg_element: svg_element$1, 275 text: text$6 276} = window.__gradio__svelte__internal; 277function create_fragment$b(ctx) { 278 let svg; 279 let title; 280 let t; 281 let path0; 282 let path1; 283 let path2; 284 285 return { 286 c() { 287 svg = svg_element$1("svg"); 288 title = svg_element$1("title"); 289 t = text$6("High volume"); 290 path0 = svg_element$1("path"); 291 path1 = svg_element$1("path"); 292 path2 = svg_element$1("path"); 293 attr$8(path0, "d", "M1 13.8571V10.1429C1 9.03829 1.89543 8.14286 3 8.14286H5.9C6.09569 8.14286 6.28708 8.08544 6.45046 7.97772L12.4495 4.02228C13.1144 3.5839 14 4.06075 14 4.85714V19.1429C14 19.9392 13.1144 20.4161 12.4495 19.9777L6.45046 16.0223C6.28708 15.9146 6.09569 15.8571 5.9 15.8571H3C1.89543 15.8571 1 14.9617 1 13.8571Z"); 294 attr$8(path0, "stroke-width", "1.5"); 295 attr$8(path1, "d", "M17.5 7.5C17.5 7.5 19 9 19 11.5C19 14 17.5 15.5 17.5 15.5"); 296 attr$8(path1, "stroke-width", "1.5"); 297 attr$8(path1, "stroke-linecap", "round"); 298 attr$8(path1, "stroke-linejoin", "round"); 299 attr$8(path2, "d", "M20.5 4.5C20.5 4.5 23 7 23 11.5C23 16 20.5 18.5 20.5 18.5"); 300 attr$8(path2, "stroke-width", "1.5"); 301 attr$8(path2, "stroke-linecap", "round"); 302 attr$8(path2, "stroke-linejoin", "round"); 303 attr$8(svg, "width", "24"); 304 attr$8(svg, "height", "24"); 305 attr$8(svg, "viewBox", "0 0 24 24"); 306 attr$8(svg, "stroke-width", "1.5"); 307 attr$8(svg, "fill", "none"); 308 attr$8(svg, "stroke", "currentColor"); 309 attr$8(svg, "xmlns", "http://www.w3.org/2000/svg"); 310 attr$8(svg, "color", "currentColor"); 311 }, 312 m(target, anchor) { 313 insert$b(target, svg, anchor); 314 append$7(svg, title); 315 append$7(title, t); 316 append$7(svg, path0); 317 append$7(svg, path1); 318 append$7(svg, path2); 319 }, 320 p: noop$6, 321 i: noop$6, 322 o: noop$6, 323 d(detaching) { 324 if (detaching) { 325 detach$b(svg); 326 } 327 } 328 }; 329} 330 331class VolumeHigh extends SvelteComponent$b { 332 constructor(options) { 333 super(); 334 init$b(this, options, null, create_fragment$b, safe_not_equal$b, {}); 335 } 336} 337 338/* home/runner/work/gradio/gradio/js/icons/src/VolumeMuted.svelte generated by Svelte v4.2.2 */ 339const { 340 SvelteComponent: SvelteComponent$a, 341 append: append$6, 342 attr: attr$7, 343 detach: detach$a, 344 init: init$a, 345 insert: insert$a, 346 noop: noop$5, 347 safe_not_equal: safe_not_equal$a, 348 svg_element, 349 text: text$5 350} = window.__gradio__svelte__internal; 351function create_fragment$a(ctx) { 352 let svg; 353 let title; 354 let t; 355 let g; 356 let path0; 357 let path1; 358 let defs; 359 let clipPath; 360 let rect; 361 362 return { 363 c() { 364 svg = svg_element("svg"); 365 title = svg_element("title"); 366 t = text$5("Muted volume"); 367 g = svg_element("g"); 368 path0 = svg_element("path"); 369 path1 = svg_element("path"); 370 defs = svg_element("defs"); 371 clipPath = svg_element("clipPath"); 372 rect = svg_element("rect"); 373 attr$7(path0, "d", "M18 14L20.0005 12M22 10L20.0005 12M20.0005 12L18 10M20.0005 12L22 14"); 374 attr$7(path0, "stroke-width", "1.5"); 375 attr$7(path0, "stroke-linecap", "round"); 376 attr$7(path0, "stroke-linejoin", "round"); 377 attr$7(path1, "d", "M2 13.8571V10.1429C2 9.03829 2.89543 8.14286 4 8.14286H6.9C7.09569 8.14286 7.28708 8.08544 7.45046 7.97772L13.4495 4.02228C14.1144 3.5839 15 4.06075 15 4.85714V19.1429C15 19.9392 14.1144 20.4161 13.4495 19.9777L7.45046 16.0223C7.28708 15.9146 7.09569 15.8571 6.9 15.8571H4C2.89543 15.8571 2 14.9617 2 13.8571Z"); 378 attr$7(path1, "stroke-width", "1.5"); 379 attr$7(g, "clip-path", "url(#clip0_3173_16686)"); 380 attr$7(rect, "width", "24"); 381 attr$7(rect, "height", "24"); 382 attr$7(rect, "fill", "white"); 383 attr$7(clipPath, "id", "clip0_3173_16686"); 384 attr$7(svg, "width", "24"); 385 attr$7(svg, "height", "24"); 386 attr$7(svg, "viewBox", "0 0 24 24"); 387 attr$7(svg, "stroke-width", "1.5"); 388 attr$7(svg, "fill", "none"); 389 attr$7(svg, "xmlns", "http://www.w3.org/2000/svg"); 390 attr$7(svg, "stroke", "currentColor"); 391 attr$7(svg, "color", "currentColor"); 392 }, 393 m(target, anchor) { 394 insert$a(target, svg, anchor); 395 append$6(svg, title); 396 append$6(title, t); 397 append$6(svg, g); 398 append$6(g, path0); 399 append$6(g, path1); 400 append$6(svg, defs); 401 append$6(defs, clipPath); 402 append$6(clipPath, rect); 403 }, 404 p: noop$5, 405 i: noop$5, 406 o: noop$5, 407 d(detaching) { 408 if (detaching) { 409 detach$a(svg); 410 } 411 } 412 }; 413} 414 415class VolumeMuted extends SvelteComponent$a { 416 constructor(options) { 417 super(); 418 init$a(this, options, null, create_fragment$a, safe_not_equal$a, {}); 419 } 420} 421 422var __awaiter$3 = (globalThis && globalThis.__awaiter) || function (thisArg, _arguments, P, generator) { 423 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 424 return new (P || (P = Promise))(function (resolve, reject) { 425 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 426 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 427 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 428 step((generator = generator.apply(thisArg, _arguments || [])).next()); 429 }); 430}; 431/** Decode an array buffer into an audio buffer */ 432function decode(audioData, sampleRate) { 433 return __awaiter$3(this, void 0, void 0, function* () { 434 const audioCtx = new AudioContext({ sampleRate }); 435 const decode = audioCtx.decodeAudioData(audioData); 436 return decode.finally(() => audioCtx.close()); 437 }); 438} 439/** Normalize peaks to -1..1 */ 440function normalize(channelData) { 441 const firstChannel = channelData[0]; 442 if (firstChannel.some((n) => n > 1 || n < -1)) { 443 const length = firstChannel.length; 444 let max = 0; 445 for (let i = 0; i < length; i++) { 446 const absN = Math.abs(firstChannel[i]); 447 if (absN > max) 448 max = absN; 449 } 450 for (const channel of channelData) { 451 for (let i = 0; i < length; i++) { 452 channel[i] /= max; 453 } 454 } 455 } 456 return channelData; 457} 458/** Create an audio buffer from pre-decoded audio data */ 459function createBuffer(channelData, duration) { 460 // If a single array of numbers is passed, make it an array of arrays 461 if (typeof channelData[0] === 'number') 462 channelData = [channelData]; 463 // Normalize to -1..1 464 normalize(channelData); 465 return { 466 duration, 467 length: channelData[0].length, 468 sampleRate: channelData[0].length / duration, 469 numberOfChannels: channelData.length, 470 getChannelData: (i) => channelData === null || channelData === void 0 ? void 0 : channelData[i], 471 copyFromChannel: AudioBuffer.prototype.copyFromChannel, 472 copyToChannel: AudioBuffer.prototype.copyToChannel, 473 }; 474} 475const Decoder = { 476 decode, 477 createBuffer, 478}; 479 480var __awaiter$2 = (globalThis && globalThis.__awaiter) || function (thisArg, _arguments, P, generator) { 481 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 482 return new (P || (P = Promise))(function (resolve, reject) { 483 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 484 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 485 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 486 step((generator = generator.apply(thisArg, _arguments || [])).next()); 487 }); 488}; 489function fetchBlob(url, progressCallback, requestInit) { 490 var _a, _b; 491 return __awaiter$2(this, void 0, void 0, function* () { 492 // Fetch the resource 493 const response = yield fetch(url, requestInit); 494 // Read the data to track progress 495 { 496 const reader = (_a = response.clone().body) === null || _a === void 0 ? void 0 : _a.getReader(); 497 const contentLength = Number((_b = response.headers) === null || _b === void 0 ? void 0 : _b.get('Content-Length')); 498 let receivedLength = 0; 499 // Process the data 500 const processChunk = (done, value) => __awaiter$2(this, void 0, void 0, function* () { 501 if (done) 502 return; 503 // Add to the received length 504 receivedLength += (value === null || value === void 0 ? void 0 : value.length) || 0; 505 const percentage = Math.round((receivedLength / contentLength) * 100); 506 progressCallback(percentage); 507 // Continue reading data 508 return reader === null || reader === void 0 ? void 0 : reader.read().then(({ done, value }) => processChunk(done, value)); 509 }); 510 reader === null || reader === void 0 ? void 0 : reader.read().then(({ done, value }) => processChunk(done, value)); 511 } 512 return response.blob(); 513 }); 514} 515const Fetcher = { 516 fetchBlob, 517}; 518 519/** A simple event emitter that can be used to listen to and emit events. */ 520class EventEmitter { 521 constructor() { 522 this.listeners = {}; 523 /** Subscribe to an event. Returns an unsubscribe function. */ 524 this.on = this.addEventListener; 525 /** Unsubscribe from an event */ 526 this.un = this.removeEventListener; 527 } 528 /** Add an event listener */ 529 addEventListener(event, listener, options) { 530 if (!this.listeners[event]) { 531 this.listeners[event] = new Set(); 532 } 533 this.listeners[event].add(listener); 534 if (options === null || options === void 0 ? void 0 : options.once) { 535 const unsubscribeOnce = () => { 536 this.removeEventListener(event, unsubscribeOnce); 537 this.removeEventListener(event, listener); 538 }; 539 this.addEventListener(event, unsubscribeOnce); 540 return unsubscribeOnce; 541 } 542 return () => this.removeEventListener(event, listener); 543 } 544 removeEventListener(event, listener) { 545 var _a; 546 (_a = this.listeners[event]) === null || _a === void 0 ? void 0 : _a.delete(listener); 547 } 548 /** Subscribe to an event only once */ 549 once(event, listener) { 550 return this.on(event, listener, { once: true }); 551 } 552 /** Clear all events */ 553 unAll() { 554 this.listeners = {}; 555 } 556 /** Emit an event */ 557 emit(eventName, ...args) { 558 if (this.listeners[eventName]) { 559 this.listeners[eventName].forEach((listener) => listener(...args)); 560 } 561 } 562} 563
564class Player extends EventEmitter { 565 constructor(options) { 566 super(); 567 this.isExternalMedia = false; 568 if (options.media) { 569 this.media = options.media; 570 this.isExternalMedia = true; 571 } 572 else { 573 this.media = document.createElement('audio'); 574 } 575 // Controls 576 if (options.mediaControls) { 577 this.media.controls = true; 578 } 579 // Autoplay 580 if (options.autoplay) { 581 this.media.autoplay = true; 582 } 583 // Speed 584 if (options.playbackRate != null) { 585 this.onceMediaEvent('canplay', () => { 586 if (options.playbackRate != null) { 587 this.media.playbackRate = options.playbackRate; 588 } 589 }); 590 } 591 } 592 onMediaEvent(event, callback, options) { 593 this.media.addEventListener(event, callback, options); 594 return () => this.media.removeEventListener(event, callback); 595 } 596 onceMediaEvent(event, callback) { 597 return this.onMediaEvent(event, callback, { once: true }); 598 } 599 getSrc() { 600 return this.media.currentSrc || this.media.src || ''; 601 } 602 revokeSrc() { 603 const src = this.getSrc(); 604 if (src.startsWith('blob:')) { 605 URL.revokeObjectURL(src); 606 } 607 } 608 setSrc(url, blob) { 609 const src = this.getSrc(); 610 if (src === url) 611 return; 612 this.revokeSrc(); 613 const newSrc = blob instanceof Blob ? URL.createObjectURL(blob) : url; 614 this.media.src = newSrc; 615 this.media.load(); 616 } 617 destroy() { 618 this.media.pause(); 619 if (this.isExternalMedia) 620 return; 621 this.media.remove(); 622 this.revokeSrc(); 623 this.media.src = ''; 624 // Load resets the media element to its initial state 625 this.media.load(); 626 } 627 setMediaElement(element) { 628 this.media = element; 629 } 630 /** Start playing the audio */ 631 play() { 632 return this.media.play(); 633 } 634 /** Pause the audio */ 635 pause() { 636 this.media.pause(); 637 } 638 /** Check if the audio is playing */ 639 isPlaying() { 640 return !this.media.paused && !this.media.ended; 641 } 642 /** Jumpt to a specific time in the audio (in seconds) */ 643 setTime(time) { 644 this.media.currentTime = time; 645 } 646 /** Get the duration of the audio in seconds */ 647 getDuration() { 648 return this.media.duration; 649 } 650 /** Get the current audio position in seconds */ 651 getCurrentTime() { 652 return this.media.currentTime; 653 } 654 /** Get the audio volume */ 655 getVolume() { 656 return this.media.volume; 657 } 658 /** Set the audio volume */ 659 setVolume(volume) { 660 this.media.volume = volume; 661 } 662 /** Get the audio muted state */ 663 getMuted() { 664 return this.media.muted; 665 } 666 /** Mute or unmute the audio */ 667 setMuted(muted) { 668 this.media.muted = muted; 669 } 670 /** Get the playback speed */ 671 getPlaybackRate() { 672 return this.media.playbackRate; 673 } 674 /** Set the playback speed, pass an optional false to NOT preserve the pitch */ 675 setPlaybackRate(rate, preservePitch) { 676 // preservePitch is true by default in most browsers 677 if (preservePitch != null) { 678 this.media.preservesPitch = preservePitch; 679 } 680 this.media.playbackRate = rate; 681 } 682 /** Get the HTML media element */ 683 getMediaElement() { 684 return this.media; 685 } 686 /** Set a sink id to change the audio output device */ 687 setSinkId(sinkId) { 688 // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId 689 const media = this.media; 690 return media.setSinkId(sinkId); 691 } 692} 693 694function makeDraggable(element, onDrag, onStart, onEnd, threshold = 5) { 695 let unsub = () => { 696 return; 697 }; 698 if (!element) 699 return unsub; 700 const down = (e) => { 701 // Ignore the right mouse button 702 if (e.button === 2) 703 return; 704 e.preventDefault(); 705 e.stopPropagation();
706 element.style.touchAction = 'none'; 707 let startX = e.clientX; 708 let startY = e.clientY; 709 let isDragging = false; 710 const move = (e) => { 711 e.preventDefault(); 712 e.stopPropagation(); 713 const x = e.clientX; 714 const y = e.clientY; 715 if (isDragging || Math.abs(x - startX) >= threshold || Math.abs(y - startY) >= threshold) { 716 const { left, top } = element.getBoundingClientRect(); 717 if (!isDragging) { 718 isDragging = true; 719 onStart === null || onStart === void 0 ? void 0 : onStart(startX - left, startY - top); 720 } 721 onDrag(x - startX, y - startY, x - left, y - top); 722 startX = x; 723 startY = y; 724 } 725 }; 726 const click = (e) => { 727 if (isDragging) { 728 e.preventDefault(); 729 e.stopPropagation(); 730 } 731 }; 732 const up = () => { 733 element.style.touchAction = ''; 734 if (isDragging) { 735 onEnd === null || onEnd === void 0 ? void 0 : onEnd(); 736 } 737 unsub(); 738 }; 739 document.addEventListener('pointermove', move); 740 document.addEventListener('pointerup', up); 741 document.addEventListener('pointerleave', up); 742 document.addEventListener('click', click, true); 743 unsub = () => { 744 document.removeEventListener('pointermove', move); 745 document.removeEventListener('pointerup', up); 746 document.removeEventListener('pointerleave', up); 747 setTimeout(() => { 748 document.removeEventListener('click', click, true); 749 }, 10); 750 }; 751 }; 752 element.addEventListener('pointerdown', down); 753 return () => { 754 unsub(); 755 element.removeEventListener('pointerdown', down); 756 }; 757} 758 759class Renderer extends EventEmitter { 760 constructor(options, audioElement) { 761 super(); 762 this.timeouts = []; 763 this.isScrolling = false; 764 this.audioData = null; 765 this.resizeObserver = null; 766 this.isDragging = false; 767 this.options = options; 768 const parent = this.parentFromOptionsContainer(options.container); 769 this.parent = parent; 770 const [div, shadow] = this.initHtml(); 771 parent.appendChild(div); 772 this.container = div; 773 this.scrollContainer = shadow.querySelector('.scroll'); 774 this.wrapper = shadow.querySelector('.wrapper'); 775 this.canvasWrapper = shadow.querySelector('.canvases'); 776 this.progressWrapper = shadow.querySelector('.progress'); 777 this.cursor = shadow.querySelector('.cursor'); 778 if (audioElement) { 779 shadow.appendChild(audioElement); 780 } 781 this.initEvents(); 782 } 783 parentFromOptionsContainer(container) { 784 let parent; 785 if (typeof container === 'string') { 786 parent = document.querySelector(container); 787 } 788 else if (container instanceof HTMLElement) { 789 parent = container; 790 } 791 if (!parent) { 792 throw new Error('Container not found'); 793 } 794 return parent; 795 } 796 initEvents() { 797 const getClickPosition = (e) => { 798 const rect = this.wrapper.getBoundingClientRect(); 799 const x = e.clientX - rect.left; 800 const y = e.clientX - rect.left; 801 const relativeX = x / rect.width; 802 const relativeY = y / rect.height; 803 return [relativeX, relativeY]; 804 }; 805 // Add a click listener 806 this.wrapper.addEventListener('click', (e) => { 807 const [x, y] = getClickPosition(e); 808 this.emit('click', x, y); 809 }); 810 // Add a double click listener 811 this.wrapper.addEventListener('dblclick', (e) => { 812 const [x, y] = getClickPosition(e); 813 this.emit('dblclick', x, y); 814 }); 815 // Drag 816 if (this.options.dragToSeek) { 817 this.initDrag(); 818 } 819 // Add a scroll listener 820 this.scrollContainer.addEventListener('scroll', () => { 821 const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer; 822 const startX = scrollLeft / scrollWidth; 823 const endX = (scrollLeft + clientWidth) / scrollWidth;
824 this.emit('scroll', startX, endX); 825 }); 826 // Re-render the waveform on container resize 827 const delay = this.createDelay(100); 828 this.resizeObserver = new ResizeObserver(() => { 829 delay(() => this.reRender()); 830 }); 831 this.resizeObserver.observe(this.scrollContainer); 832 } 833 initDrag() { 834 makeDraggable(this.wrapper, 835 // On drag 836 (_, __, x) => { 837 this.emit('drag', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width))); 838 }, 839 // On start drag 840 () => (this.isDragging = true), 841 // On end drag 842 () => (this.isDragging = false)); 843 } 844 getHeight() { 845 const defaultHeight = 128; 846 if (this.options.height == null) 847 return defaultHeight; 848 if (!isNaN(Number(this.options.height))) 849 return Number(this.options.height); 850 if (this.options.height === 'auto') 851 return this.parent.clientHeight || defaultHeight; 852 return defaultHeight; 853 } 854 initHtml() { 855 const div = document.createElement('div'); 856 const shadow = div.attachShadow({ mode: 'open' }); 857 shadow.innerHTML = ` 858 <style> 859 :host { 860 user-select: none; 861 min-width: 1px; 862 } 863 :host audio { 864 display: block; 865 width: 100%; 866 } 867 :host .scroll { 868 overflow-x: auto; 869 overflow-y: hidden; 870 width: 100%; 871 position: relative; 872 } 873 :host .noScrollbar {
874 scrollbar-color: transparent; 875 scrollbar-width: none; 876 } 877 :host .noScrollbar::-webkit-scrollbar { 878 display: none; 879 -webkit-appearance: none; 880 } 881 :host .wrapper { 882 position: relative; 883 overflow: visible; 884 z-index: 2; 885 } 886 :host .canvases { 887 min-height: ${this.getHeight()}px; 888 } 889 :host .canvases > div { 890 position: relative; 891 } 892 :host canvas { 893 display: block; 894 position: absolute; 895 top: 0; 896 image-rendering: pixelated; 897 } 898 :host .progress { 899 pointer-events: none; 900 position: absolute; 901 z-index: 2; 902 top: 0; 903 left: 0; 904 width: 0; 905 height: 100%; 906 overflow: hidden; 907 } 908 :host .progress > div { 909 position: relative; 910 } 911 :host .cursor { 912 pointer-events: none; 913 position: absolute; 914 z-index: 5; 915 top: 0; 916 left: 0; 917 height: 100%; 918 border-radius: 2px; 919 } 920 </style> 921 922 <div class="scroll" part="scroll"> 923 <div class="wrapper" part="wrapper"> 924 <div class="canvases"></div> 925 <div class="progress" part="progress"></div> 926 <div class="cursor" part="cursor"></div> 927 </div> 928 </div> 929 `; 930 return [div, shadow]; 931 } 932 /** Wavesurfer itself calls this method. Do not call it manually. */ 933 setOptions(options) { 934 if (this.options.container !== options.container) { 935 const newParent = this.parentFromOptionsContainer(options.container); 936 newParent.appendChild(this.container); 937 this.parent = newParent; 938 } 939 if (options.dragToSeek && !this.options.dragToSeek) { 940 this.initDrag(); 941 } 942 this.options = options; 943 // Re-render the waveform 944 this.reRender(); 945 } 946 getWrapper() { 947 return this.wrapper; 948 } 949 getScroll() { 950 return this.scrollContainer.scrollLeft; 951 } 952 destroy() { 953 var _a; 954 this.container.remove(); 955 (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect(); 956 } 957 createDelay(delayMs = 10) { 958 const context = {}; 959 this.timeouts.push(context); 960 return (callback) => { 961 context.timeout && clearTimeout(context.timeout); 962 context.timeout = setTimeout(callback, delayMs); 963 }; 964 } 965 // Convert array of color values to linear gradient 966 convertColorValues(color) { 967 if (!Array.isArray(color)) 968 return color || ''; 969 if (color.length < 2) 970 return color[0] || ''; 971 const canvasElement = document.createElement('canvas'); 972 const ctx = canvasElement.getContext('2d'); 973 const gradient = ctx.createLinearGradient(0, 0, 0, canvasElement.height); 974 const colorStopPercentage = 1 / (color.length - 1); 975 color.forEach((color, index) => { 976 const offset = index * colorStopPercentage; 977 gradient.addColorStop(offset, color); 978 }); 979 return gradient; 980 } 981 renderBarWaveform(channelData, options, ctx, vScale) { 982 const topChannel = channelData[0]; 983 const bottomChannel = channelData[1] || channelData[0]; 984 const length = topChannel.length; 985 const { width, height } = ctx.canvas; 986 const halfHeight = height / 2; 987 const pixelRatio = window.devicePixelRatio || 1; 988 const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1; 989 const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0; 990 const barRadius = options.barRadius || 0; 991 const barIndexScale = width / (barWidth + barGap) / length; 992 const rectFn = barRadius && 'roundRect' in ctx ? 'roundRect' : 'rect'; 993 ctx.beginPath(); 994 let prevX = 0; 995 let maxTop = 0; 996 let maxBottom = 0; 997 for (let i = 0; i <= length; i++) { 998 const x = Math.round(i * barIndexScale); 999 if (x >
999 prevX) { 1000 const topBarHeight = Math.round(maxTop * halfHeight * vScale); 1001 const bottomBarHeight = Math.round(maxBottom * halfHeight * vScale); 1002 const barHeight = topBarHeight + bottomBarHeight || 1; 1003 // Vertical alignment 1004 let y = halfHeight - topBarHeight; 1005 if (options.barAlign === 'top') { 1006 y = 0; 1007 } 1008 else if (options.barAlign === 'bottom') { 1009 y = height - barHeight; 1010 } 1011 ctx[rectFn](prevX * (barWidth + barGap), y, barWidth, barHeight, barRadius); 1012 prevX = x; 1013 maxTop = 0; 1014 maxBottom = 0; 1015 } 1016 const magnitudeTop = Math.abs(topChannel[i] || 0); 1017 const magnitudeBottom = Math.abs(bottomChannel[i] || 0); 1018 if (magnitudeTop > maxTop) 1019 maxTop = magnitudeTop; 1020 if (magnitudeBottom > maxBottom) 1021 maxBottom = magnitudeBottom; 1022 } 1023 ctx.fill(); 1024 ctx.closePath(); 1025 } 1026 renderLineWaveform(channelData, _options, ctx, vScale) { 1027 const drawChannel = (index) => { 1028 const channel = channelData[index] || channelData[0]; 1029 const length = channel.length; 1030 const { height } = ctx.canvas; 1031 const halfHeight = height / 2; 1032 const hScale = ctx.canvas.width / length; 1033 ctx.moveTo(0, halfHeight); 1034 let prevX = 0; 1035 let max = 0; 1036 for (let i = 0; i <= length; i++) { 1037 const x = Math.round(i * hScale); 1038 if (x > prevX) { 1039 const h = Math.round(max * halfHeight * vScale) || 1; 1040 const y = halfHeight + h * (index === 0 ? -1 : 1); 1041 ctx.lineTo(prevX, y); 1042 prevX = x; 1043 max = 0; 1044 } 1045 const value = Math.abs(channel[i] || 0); 1046 if (value > max) 1047 max = value; 1048 } 1049 ctx.lineTo(prevX, halfHeight); 1050 }; 1051 ctx.beginPath(); 1052 drawChannel(0); 1053 drawChannel(1); 1054 ctx.fill(); 1055 ctx.closePath(); 1056 } 1057 renderWaveform(channelData, options, ctx) { 1058 ctx.fillStyle = this.convertColorValues(options.waveColor); 1059 // Custom rendering function 1060 if (options.renderFunction) { 1061 options.renderFunction(channelData, ctx); 1062 return; 1063 } 1064 // Vertical scaling 1065 let vScale = options.barHeight || 1; 1066 if (options.normalize) { 1067 const max = Array.from(channelData[0]).reduce((max, value) => Math.max(max, Math.abs(value)), 0); 1068 vScale = max ? 1 / max : 1; 1069 } 1070 // Render waveform as bars 1071 if (options.barWidth || options.barGap || options.barAlign) { 1072 this.renderBarWaveform(channelData, options, ctx, vScale); 1073 return; 1074 } 1075 // Render waveform as a polyline 1076 this.renderLineWaveform(channelData, options, ctx, vScale); 1077 } 1078 renderSingleCanvas(channelData, options, width, height, start, end, canvasContainer, progressContainer) { 1079 const pixelRatio = window.devicePixelRatio || 1; 1080 const canvas = document.createElement('canvas'); 1081 const length = channelData[0].length; 1082 canvas.width = Math.round((width * (end - start)) / length); 1083 canvas.height = height * pixelRatio; 1084 canvas.style.width = `${Math.floor(canvas.width / pixelRatio)}px`; 1085 canvas.style.height = `${height}px`; 1086 canvas.style.left = `${Math.floor((start * width) / pixelRatio / length)}px`; 1087 canvasContainer.appendChild(canvas); 1088 const ctx = canvas.getContext('2d'); 1089 this.renderWaveform(channelData.map((channel) => channel.slice(start, end)), options, ctx); 1090 // Draw a progress canvas 1091 if (canvas.width > 0 && canvas.height > 0) { 1092 const progressCanvas = canvas.cloneNode(); 1093 const progressCtx = progressCanvas.getContext('2d'); 1094 progressCtx.drawImage(canvas, 0, 0); 1095 // Set the composition method to draw only where the waveform is drawn 1096 progressCtx.globalCompositeOperation = 'source-in'; 1097 progressCtx.fillStyle = this.convertColorValues(options.progressColor); 1098 // This rectangle acts as a mask thanks to the composition method 1099 progressCtx.fillRect(0, 0, canvas.width, canvas.height); 1100 progressContainer.appendChild(progressCanvas); 1101 } 1102 } 1103 renderChannel(channelData, options, width) {
1104 // A container for canvases 1105 const canvasContainer = document.createElement('div'); 1106 const height = this.getHeight(); 1107 canvasContainer.style.height = `${height}px`; 1108 this.canvasWrapper.style.minHeight = `${height}px`; 1109 this.canvasWrapper.appendChild(canvasContainer); 1110 // A container for progress canvases 1111 const progressContainer = canvasContainer.cloneNode(); 1112 this.progressWrapper.appendChild(progressContainer); 1113 // Determine the currently visible part of the waveform 1114 const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer; 1115 const len = channelData[0].length; 1116 const scale = len / scrollWidth; 1117 let viewportWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth); 1118 // Adjust width to avoid gaps between canvases when using bars 1119 if (options.barWidth || options.barGap) { 1120 const barWidth = options.barWidth || 0.5; 1121 const barGap = options.barGap || barWidth / 2; 1122 const totalBarWidth = barWidth + barGap; 1123 if (viewportWidth % totalBarWidth !== 0) { 1124 viewportWidth = Math.floor(viewportWidth / totalBarWidth) * totalBarWidth; 1125 } 1126 } 1127 const start = Math.floor(Math.abs(scrollLeft) * scale); 1128 const end = Math.floor(start + viewportWidth * scale); 1129 const viewportLen = end - start; 1130 // Draw a portion of the waveform from start peak to end peak 1131 const draw = (start, end) => { 1132 this.renderSingleCanvas(channelData, options, width, height, Math.max(0, start), Math.min(end, len), canvasContainer, progressContainer); 1133 }; 1134 // Draw the waveform in viewport chunks, each with a delay 1135 const headDelay = this.createDelay(); 1136 const tailDelay = this.createDelay(); 1137 const renderHead = (fromIndex, toIndex) => { 1138 draw(fromIndex, toIndex); 1139 if (fromIndex > 0) { 1140 headDelay(() => { 1141 renderHead(fromIndex - viewportLen, toIndex - viewportLen); 1142 }); 1143 } 1144 }; 1145 const renderTail = (fromIndex, toIndex) => { 1146 draw(fromIndex, toIndex); 1147 if (toIndex < len) { 1148 tailDelay(() => { 1149 renderTail(fromIndex + viewportLen, toIndex + viewportLen); 1150 }); 1151 } 1152 }; 1153 renderHead(start, end); 1154 if (end < len) { 1155 renderTail(end, end + viewportLen); 1156 } 1157 } 1158 render(audioData) { 1159 // Clear previous timeouts 1160 this.timeouts.forEach((context) => context.timeout && clearTimeout(context.timeout)); 1161 this.timeouts = []; 1162 // Clear the canvases 1163 this.canvasWrapper.innerHTML = ''; 1164 this.progressWrapper.innerHTML = ''; 1165 this.wrapper.style.width = ''; 1166 // Width 1167 if (this.options.width != null) { 1168 this.scrollContainer.style.width = 1169 typeof this.options.width === 'number' ? `${this.options.width}px` : this.options.width; 1170 } 1171 // Determine the width of the waveform 1172 const pixelRatio = window.devicePixelRatio || 1; 1173 const parentWidth = this.scrollContainer.clientWidth; 1174 const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0)); 1175 // Whether the container should scroll 1176 this.isScrolling = scrollWidth > parentWidth; 1177 const useParentWidth = this.options.fillParent && !this.isScrolling; 1178 // Width of the waveform in pixels 1179 const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio; 1180 // Set the width of the wrapper 1181 this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`; 1182 // Set additional styles 1183 this.scrollContainer.style.overflowX = this.isScrolling ? 'auto' : 'hidden'; 1184 this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar); 1185 this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`; 1186 this.cursor.style.width = `${this.options.cursorWidth}px`; 1187 // Render the waveform 1188 if (this.options.splitChannels) { 1189 // Render a waveform for each channel 1190 for (let i = 0; i < audioData.numberOfChannels; i++) { 1191 const options = Object.assign(Object.assign({}, this.options), this.options.splitChannels[i]); 1192 this.renderChannel([audioData.getChannelData(i)], options, width); 1193 } 1194 } 1195 else { 1196 // Render a single waveform for the first two channels (left and right) 1197 const channels = [audioData.getChannelData(0)]; 1198 if (audioData.numberOfChannels > 1) 1199 channels.push(audioData.getChannelData(1)); 1200 this.renderChannel(channels, this.options, width); 1201 } 1202 this.audioData = audioData;
1203 this.emit('render'); 1204 } 1205 reRender() { 1206 // Return if the waveform has not been rendered yet 1207 if (!this.audioData) 1208 return; 1209 // Remember the current cursor position 1210 const oldCursorPosition = this.progressWrapper.clientWidth; 1211 // Set the new zoom level and re-render the waveform 1212 this.render(this.audioData); 1213 // Adjust the scroll position so that the cursor stays in the same place 1214 const newCursortPosition = this.progressWrapper.clientWidth; 1215 this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition; 1216 } 1217 zoom(minPxPerSec) { 1218 this.options.minPxPerSec = minPxPerSec; 1219 this.reRender(); 1220 } 1221 scrollIntoView(progress, isPlaying = false) { 1222 const { clientWidth, scrollLeft, scrollWidth } = this.scrollContainer; 1223 const progressWidth = scrollWidth * progress; 1224 const center = clientWidth / 2; 1225 const minScroll = isPlaying && this.options.autoCenter && !this.isDragging ? center : clientWidth; 1226 if (progressWidth > scrollLeft + minScroll || progressWidth < scrollLeft) { 1227 // Scroll to the center 1228 if (this.options.autoCenter && !this.isDragging) { 1229 // If the cursor is in viewport but not centered, scroll to the center slowly 1230 const minDiff = center / 20; 1231 if (progressWidth - (scrollLeft + center) >= minDiff && progressWidth < scrollLeft + clientWidth) { 1232 this.scrollContainer.scrollLeft += minDiff; 1233 } 1234 else { 1235 // Otherwise, scroll to the center immediately 1236 this.scrollContainer.scrollLeft = progressWidth - center; 1237 } 1238 } 1239 else if (this.isDragging) { 1240 // Scroll just a little bit to allow for some space between the cursor and the edge 1241 const gap = 10; 1242 this.scrollContainer.scrollLeft = 1243 progressWidth < scrollLeft ? progressWidth - gap : progressWidth - clientWidth + gap; 1244 } 1245 else { 1246 // Scroll to the beginning 1247 this.scrollContainer.scrollLeft = progressWidth; 1248 } 1249 } 1250 // Emit the scroll event 1251 { 1252 const { scrollLeft } = this.scrollContainer; 1253 const startX = scrollLeft / scrollWidth; 1254 const endX = (scrollLeft + clientWidth) / scrollWidth; 1255 this.emit('scroll', startX, endX); 1256 } 1257 } 1258 renderProgress(progress, isPlaying) { 1259 if (isNaN(progress)) 1260 return; 1261 const percents = progress * 100; 1262 this.canvasWrapper.style.clipPath = `polygon(${percents}% 0, 100% 0, 100% 100%, ${percents}% 100%)`; 1263 this.progressWrapper.style.width = `${percents}%`; 1264 this.cursor.style.left = `${percents}%`; 1265 this.cursor.style.marginLeft = Math.round(percents) === 100 ? `-${this.options.cursorWidth}px` : ''; 1266 if (this.isScrolling && this.options.autoScroll) { 1267 this.scrollIntoView(progress, isPlaying); 1268 } 1269 } 1270} 1271Renderer.MAX_CANVAS_WIDTH = 4000; 1272 1273class Timer extends EventEmitter { 1274 constructor() { 1275 super(...arguments); 1276 this.unsubscribe = () => undefined; 1277 } 1278 start() { 1279 this.unsubscribe = this.on('tick', () => { 1280 requestAnimationFrame(() => { 1281 this.emit('tick'); 1282 }); 1283 }); 1284 this.emit('tick'); 1285 } 1286 stop() { 1287 this.unsubscribe(); 1288 } 1289 destroy() { 1290 this.unsubscribe(); 1291 } 1292} 1293 1294var __awaiter$1 = (globalThis && globalThis.__awaiter) || function (thisArg, _arguments, P, generator) { 1295 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 1296 return new (P || (P = Promise))(function (resolve, reject) { 1297 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 1298 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 1299 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 1300 step((generator = generator.apply(thisArg, _arguments || [])).next()); 1301 }); 1302}; 1303/** 1304 * A Web Audio buffer player emulating the behavior of an HTML5 Audio element. 1305 */
1306class WebAudioPlayer extends EventEmitter { 1307 constructor(audioContext = new AudioContext()) { 1308 super(); 1309 this.bufferNode = null; 1310 this.autoplay = false; 1311 this.playStartTime = 0; 1312 this.playedDuration = 0; 1313 this._muted = false; 1314 this.buffer = null; 1315 this.currentSrc = ''; 1316 this.paused = true; 1317 this.crossOrigin = null; 1318 this.audioContext = audioContext; 1319 this.gainNode = this.audioContext.createGain(); 1320 this.gainNode.connect(this.audioContext.destination); 1321 } 1322 load() { 1323 return __awaiter$1(this, void 0, void 0, function* () { 1324 return; 1325 }); 1326 } 1327 get src() { 1328 return this.currentSrc; 1329 } 1330 set src(value) { 1331 this.currentSrc = value; 1332 fetch(value) 1333 .then((response) => response.arrayBuffer()) 1334 .then((arrayBuffer) => this.audioContext.decodeAudioData(arrayBuffer)) 1335 .then((audioBuffer) => { 1336 this.buffer = audioBuffer; 1337 this.emit('loadedmetadata'); 1338 this.emit('canplay'); 1339 if (this.autoplay) 1340 this.play(); 1341 }); 1342 } 1343 _play() { 1344 var _a; 1345 if (!this.paused) 1346 return; 1347 this.paused = false; 1348 (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.disconnect(); 1349 this.bufferNode = this.audioContext.createBufferSource(); 1350 this.bufferNode.buffer = this.buffer; 1351 this.bufferNode.connect(this.gainNode); 1352 if (this.playedDuration >= this.duration) { 1353 this.playedDuration = 0; 1354 } 1355 this.bufferNode.start(this.audioContext.currentTime, this.playedDuration); 1356 this.playStartTime = this.audioContext.currentTime; 1357 this.bufferNode.onended = () => { 1358 if (this.currentTime >= this.duration) { 1359 this.pause(); 1360 this.emit('ended'); 1361 } 1362 }; 1363 } 1364 _pause() { 1365 var _a; 1366 if (this.paused) 1367 return; 1368 this.paused = true; 1369 (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.stop(); 1370 this.playedDuration += this.audioContext.currentTime - this.playStartTime; 1371 } 1372 play() { 1373 return __awaiter$1(this, void 0, void 0, function* () { 1374 this._play(); 1375 this.emit('play'); 1376 }); 1377 } 1378 pause() { 1379 this._pause(); 1380 this.emit('pause'); 1381 } 1382 setSinkId(deviceId) { 1383 return __awaiter$1(this, void 0, void 0, function* () { 1384 const ac = this.audioContext; 1385 return ac.setSinkId(deviceId); 1386 }); 1387 } 1388 get playbackRate() { 1389 var _a, _b; 1390 return (_b = (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.playbackRate.value) !== null && _b !== void 0 ? _b : 1; 1391 } 1392 set playbackRate(value) { 1393 if (this.bufferNode) { 1394 this.bufferNode.playbackRate.value = value; 1395 } 1396 } 1397 get currentTime() { 1398 return this.paused ? this.playedDuration : this.playedDuration + this.audioContext.currentTime - this.playStartTime; 1399 } 1400 set currentTime(value) { 1401 this.emit('seeking'); 1402 if (this.paused) { 1403 this.playedDuration = value; 1404 } 1405 else { 1406 this._pause(); 1407 this.playedDuration = value; 1408 this._play(); 1409 } 1410 this.emit('timeupdate'); 1411 } 1412 get duration() { 1413 var _a; 1414 return ((_a = this.buffer) === null || _a === void 0 ? void 0 : _a.duration) || 0; 1415 } 1416 get volume() { 1417 return this.gainNode.gain.value; 1418 } 1419 set volume(value) { 1420 this.gainNode.gain.value = value; 1421 this.emit('volumechange'); 1422 } 1423 get muted() { 1424 return this._muted; 1425 } 1426 set muted(value) { 1427 if (this._muted === value) 1428 return; 1429 this._muted = value; 1430 if (this._muted) { 1431 this.gainNode.disconnect(); 1432 } 1433 else { 1434 this.gainNode.connect(this.audioContext.destination); 1435 } 1436 } 1437 /** Get the GainNode used to play the audio. Can be used to attach filters. */ 1438 getGainNode() { 1439 return this.gainNode; 1440 } 1441} 1442 1443var __awaiter = (globalThis && globalThis.__awaiter) || function (thisArg, _arguments, P, generator) { 1444 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 1445 return new (P || (P = Promise))(function (resolve, reject) { 1446 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 1447 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 1448 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 1449 step((generator = generator.apply(thisArg, _arguments || [])).next()); 1450 }); 1451}; 1452const defaultOptions = { 1453 waveColor: '#999', 1454 progressColor: '#555', 1455 cursorWidth: 1, 1456 minPxPerSec: 0, 1457 fillParent: true, 1458 interact: true, 1459 dragToSeek: false, 1460 autoScroll: true, 1461 autoCenter: true, 1462 sampleRate: 8000, 1463}; 1464class WaveSurfer extends Player { 1465 /** Create a new WaveSurfer instance */ 1466 static create(options) { 1467 return new WaveSurfer(options); 1468 } 1469 /** Create a new WaveSurfer instance */ 1470 constructor(options) { 1471 const media = options.media || 1472 (options.backend === 'WebAudio' ? new WebAudioPlayer() : undefined); 1473 super({ 1474 media,
1475 mediaControls: options.mediaControls, 1476 autoplay: options.autoplay, 1477 playbackRate: options.audioRate, 1478 }); 1479 this.plugins = []; 1480 this.decodedData = null; 1481 this.subscriptions = []; 1482 this.mediaSubscriptions = []; 1483 this.options = Object.assign({}, defaultOptions, options); 1484 this.timer = new Timer(); 1485 const audioElement = media ? undefined : this.getMediaElement(); 1486 this.renderer = new Renderer(this.options, audioElement); 1487 this.initPlayerEvents(); 1488 this.initRendererEvents(); 1489 this.initTimerEvents(); 1490 this.initPlugins(); 1491 // Load audio if URL is passed or an external media with an src 1492 const url = this.options.url || this.getSrc(); 1493 if (url) { 1494 this.load(url, this.options.peaks, this.options.duration); 1495 } 1496 else if (this.options.peaks && this.options.duration) { 1497 // If pre-decoded peaks and duration are provided, render a waveform w/o loading audio 1498 this.loadPredecoded(); 1499 } 1500 } 1501 initTimerEvents() { 1502 // The timer fires every 16ms for a smooth progress animation 1503 this.subscriptions.push(this.timer.on('tick', () => { 1504 const currentTime = this.getCurrentTime(); 1505 this.renderer.renderProgress(currentTime / this.getDuration(), true); 1506 this.emit('timeupdate', currentTime); 1507 this.emit('audioprocess', currentTime); 1508 })); 1509 } 1510 initPlayerEvents() { 1511 this.mediaSubscriptions.push(this.onMediaEvent('timeupdate', () => { 1512 const currentTime = this.getCurrentTime(); 1513 this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying()); 1514 this.emit('timeupdate', currentTime); 1515 }), this.onMediaEvent('play', () => { 1516 this.emit('play'); 1517 this.timer.start(); 1518 }), this.onMediaEvent('pause', () => { 1519 this.emit('pause'); 1520 this.timer.stop(); 1521 }), this.onMediaEvent('emptied', () => { 1522 this.timer.stop(); 1523 }), this.onMediaEvent('ended', () => { 1524 this.emit('finish'); 1525 }), this.onMediaEvent('seeking', () => { 1526 this.emit('seeking', this.getCurrentTime()); 1527 })); 1528 } 1529 initRendererEvents() { 1530 this.subscriptions.push( 1531 // Seek on click 1532 this.renderer.on('click', (relativeX, relativeY) => { 1533 if (this.options.interact) { 1534 this.seekTo(relativeX); 1535 this.emit('interaction', relativeX * this.getDuration()); 1536 this.emit('click', relativeX, relativeY); 1537 } 1538 }), 1539 // Double click 1540 this.renderer.on('dblclick', (relativeX, relativeY) => { 1541 this.emit('dblclick', relativeX, relativeY); 1542 }), 1543 // Scroll 1544 this.renderer.on('scroll', (startX, endX) => { 1545 const duration = this.getDuration(); 1546 this.emit('scroll', startX * duration, endX * duration); 1547 }), 1548 // Redraw 1549 this.renderer.on('render', () => { 1550 this.emit('redraw'); 1551 })); 1552 // Drag 1553 { 1554 let debounce; 1555 this.subscriptions.push(this.renderer.on('drag', (relativeX) => { 1556 if (!this.options.interact) 1557 return; 1558 // Update the visual position 1559 this.renderer.renderProgress(relativeX); 1560 // Set the audio position with a debounce 1561 clearTimeout(debounce); 1562 debounce = setTimeout(() => { 1563 this.seekTo(relativeX); 1564 }, this.isPlaying() ? 0 : 200); 1565 this.emit('interaction', relativeX * this.getDuration()); 1566 this.emit('drag', relativeX); 1567 })); 1568 } 1569 } 1570 initPlugins() { 1571 var _a; 1572 if (!((_a = this.options.plugins) === null || _a === void 0 ? void 0 : _a.length)) 1573 return; 1574 this.options.plugins.forEach((plugin) => { 1575 this.registerPlugin(plugin); 1576 }); 1577 } 1578 unsubscribePlayerEvents() { 1579 this.mediaSubscriptions.forEach((unsubscribe) => unsubscribe()); 1580 this.mediaSubscriptions = []; 1581 } 1582 /** Set new wavesurfer options and re-render it */ 1583 setOptions(options) { 1584 this.options = Object.assign({}, this.options, options); 1585 this.renderer.setOptions(this.options); 1586 if (options.audioRate) { 1587 this.setPlaybackRate(options.audioRate); 1588 }
1589 if (options.mediaControls != null) { 1590 this.getMediaElement().controls = options.mediaControls; 1591 } 1592 } 1593 /** Register a wavesurfer.js plugin */ 1594 registerPlugin(plugin) { 1595 plugin.init(this); 1596 this.plugins.push(plugin); 1597 // Unregister plugin on destroy 1598 this.subscriptions.push(plugin.once('destroy', () => { 1599 this.plugins = this.plugins.filter((p) => p !== plugin); 1600 })); 1601 return plugin; 1602 } 1603 /** For plugins only: get the waveform wrapper div */ 1604 getWrapper() { 1605 return this.renderer.getWrapper(); 1606 } 1607 /** Get the current scroll position in pixels */ 1608 getScroll() { 1609 return this.renderer.getScroll(); 1610 } 1611 /** Get all registered plugins */ 1612 getActivePlugins() { 1613 return this.plugins; 1614 } 1615 loadPredecoded() { 1616 return __awaiter(this, void 0, void 0, function* () { 1617 if (this.options.peaks && this.options.duration) { 1618 this.decodedData = Decoder.createBuffer(this.options.peaks, this.options.duration); 1619 yield Promise.resolve(); // wait for event listeners to subscribe 1620 this.renderDecoded(); 1621 } 1622 }); 1623 } 1624 renderDecoded() { 1625 return __awaiter(this, void 0, void 0, function* () { 1626 if (this.decodedData) { 1627 this.emit('decode', this.getDuration()); 1628 this.renderer.render(this.decodedData); 1629 } 1630 }); 1631 } 1632 loadAudio(url, blob, channelData, duration) { 1633 return __awaiter(this, void 0, void 0, function* () { 1634 this.emit('load', url); 1635 if (!this.options.media && this.isPlaying()) 1636 this.pause(); 1637 this.decodedData = null; 1638 // Fetch the entire audio as a blob if pre-decoded data is not provided 1639 if (!blob && !channelData) { 1640 const onProgress = (percentage) => this.emit('loading', percentage); 1641 blob = yield Fetcher.fetchBlob(url, onProgress, this.options.fetchParams); 1642 } 1643 // Set the mediaelement source 1644 this.setSrc(url, blob); 1645 // Wait for the audio duration 1646 // It should be a promise to allow event listeners to subscribe to the ready and decode events 1647 duration = 1648 (yield Promise.resolve(duration || this.getDuration())) || 1649 (yield new Promise((resolve) => { 1650 this.onceMediaEvent('loadedmetadata', () => resolve(this.getDuration())); 1651 })) || 1652 (yield Promise.resolve(0));
1653 // Decode the audio data or use user-provided peaks 1654 if (channelData) { 1655 this.decodedData = Decoder.createBuffer(channelData, duration); 1656 } 1657 else if (blob) { 1658 const arrayBuffer = yield blob.arrayBuffer(); 1659 this.decodedData = yield Decoder.decode(arrayBuffer, this.options.sampleRate); 1660 } 1661 this.renderDecoded(); 1662 this.emit('ready', this.getDuration()); 1663 }); 1664 } 1665 /** Load an audio file by URL, with optional pre-decoded audio data */ 1666 load(url, channelData, duration) { 1667 return __awaiter(this, void 0, void 0, function* () { 1668 yield this.loadAudio(url, undefined, channelData, duration); 1669 }); 1670 } 1671 /** Load an audio blob */ 1672 loadBlob(blob, channelData, duration) { 1673 return __awaiter(this, void 0, void 0, function* () { 1674 yield this.loadAudio('blob', blob, channelData, duration); 1675 }); 1676 } 1677 /** Zoom the waveform by a given pixels-per-second factor */ 1678 zoom(minPxPerSec) { 1679 if (!this.decodedData) { 1680 throw new Error('No audio loaded'); 1681 } 1682 this.renderer.zoom(minPxPerSec); 1683 this.emit('zoom', minPxPerSec); 1684 } 1685 /** Get the decoded audio data */ 1686 getDecodedData() { 1687 return this.decodedData; 1688 } 1689 /** Get decoded peaks */ 1690 exportPeaks({ channels = 2, maxLength = 8000, precision = 10000 } = {}) { 1691 if (!this.decodedData) { 1692 throw new Error('The audio has not been decoded yet'); 1693 } 1694 const maxChannels = Math.min(channels, this.decodedData.numberOfChannels); 1695 const peaks = []; 1696 for (let i = 0; i < maxChannels; i++) { 1697 const channel = this.decodedData.getChannelData(i); 1698 const data = []; 1699 const sampleSize = Math.round(channel.length / maxLength); 1700 for (let i = 0; i < maxLength; i++) { 1701 const sample = channel.slice(i * sampleSize, (i + 1) * sampleSize); 1702 const max = Math.max(...sample); 1703 data.push(Math.round(max * precision) / precision); 1704 } 1705 peaks.push(data); 1706 } 1707 return peaks; 1708 } 1709 /** Get the duration of the audio in seconds */ 1710 getDuration() { 1711 let duration = super.getDuration() || 0; 1712 // Fall back to the decoded data duration if the media duration is incorrect 1713 if ((duration === 0 || duration === Infinity) && this.decodedData) { 1714 duration = this.decodedData.duration; 1715 } 1716 return duration; 1717 } 1718 /** Toggle if the waveform should react to clicks */ 1719 toggleInteraction(isInteractive) { 1720 this.options.interact = isInteractive; 1721 } 1722 /** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */ 1723 seekTo(progress) { 1724 const time = this.getDuration() * progress; 1725 this.setTime(time); 1726 } 1727 /** Play or pause the audio */ 1728 playPause() { 1729 return __awaiter(this, void 0, void 0, function* () { 1730 return this.isPlaying() ? this.pause() : this.play(); 1731 }); 1732 } 1733 /** Stop the audio and go to the beginning */ 1734 stop() { 1735 this.pause(); 1736 this.setTime(0); 1737 } 1738 /** Skip N or -N seconds from the current position */ 1739 skip(seconds) { 1740 this.setTime(this.getCurrentTime() + seconds); 1741 } 1742 /** Empty the waveform by loading a tiny silent audio */ 1743 empty() { 1744 this.load('', [[0]], 0.001); 1745 } 1746 /** Set HTML media element */ 1747 setMediaElement(element) { 1748 this.unsubscribePlayerEvents(); 1749 super.setMediaElement(element); 1750 this.initPlayerEvents(); 1751 } 1752 /** Unmount wavesurfer */ 1753 destroy() { 1754 this.emit('destroy'); 1755 this.plugins.forEach((plugin) => plugin.destroy()); 1756 this.subscriptions.forEach((unsubscribe) => unsubscribe()); 1757 this.unsubscribePlayerEvents(); 1758 this.timer.destroy(); 1759 this.renderer.destroy(); 1760 super.destroy(); 1761 } 1762} 1763 1764function audioBufferToWav(audioBuffer) { 1765 const numOfChan = audioBuffer.numberOfChannels; 1766 const length = audioBuffer.length * numOfChan * 2 + 44; 1767 const buffer = new ArrayBuffer(length); 1768 const view = new DataView(buffer); 1769 let offset = 0; 1770 const writeString = function(view2, offset2, string) { 1771 for (let i = 0; i < string.length; i++) { 1772 view2.setUint8(offset2 + i, string.charCodeAt(i)); 1773 } 1774 }; 1775 writeString(view, offset, "RIFF"); 1776 offset += 4; 1777 view.setUint32(offset, length - 8, true); 1778 offset += 4; 1779 writeString(view, offset, "WAVE"); 1780 offset += 4; 1781 writeString(view, offset, "fmt "); 1782 offset += 4; 1783 view.setUint32(offset, 16, true); 1784 offset += 4; 1785 view.setUint16(offset, 1, true); 1786 offset += 2; 1787 view.setUint16(offset, numOfChan, true); 1788 offset += 2; 1789 view.setUint32(offset, audioBuffer.sampleRate, true); 1790 offset += 4; 1791 view.setUint32(offset, audioBuffer.sampleRate * 2 * numOfChan, true); 1792 offset += 4; 1793 view.setUint16(offset, numOfChan * 2, true); 1794 offset += 2; 1795 view.setUint16(offset, 16, true); 1796 offset += 2; 1797 writeString(view, offset, "data"); 1798 offset += 4; 1799 view.setUint32(offset, audioBuffer.length * numOfChan * 2, true); 1800 offset += 4; 1801 for (let i = 0; i < audioBuffer.numberOfChannels; i++) { 1802 const channel = audioBuffer.getChannelData(i); 1803 for (let j = 0; j < channel.length; j++) { 1804 view.setInt16(offset, channel[j] * 65535, true); 1805 offset += 2; 1806 } 1807 } 1808 return new Uint8Array(buffer); 1809} 1810 1811const process_audio = async (audioBuffer, start, end) => { 1812 const audioContext = new AudioContext(); 1813 const numberOfChannels = audioBuffer.numberOfChannels; 1814 const sampleRate = audioBuffer.sampleRate; 1815 let trimmedLength = audioBuffer.length; 1816 let startOffset = 0; 1817 if (start && end) { 1818 startOffset = Math.round(start * sampleRate); 1819 const endOffset = Math.round(end * sampleRate); 1820 trimmedLength = endOffset - startOffset; 1821 } 1822 const trimmedAudioBuffer = audioContext.createBuffer( 1823 numberOfChannels, 1824 trimmedLength, 1825 sampleRate 1826 ); 1827 for (let channel = 0; channel < numberOfChannels; channel++) {
1828 const channelData = audioBuffer.getChannelData(channel); 1829 const trimmedData = trimmedAudioBuffer.getChannelData(channel); 1830 for (let i = 0; i < trimmedLength; i++) { 1831 trimmedData[i] = channelData[startOffset + i]; 1832 } 1833 } 1834 return audioBufferToWav(trimmedAudioBuffer); 1835}; 1836const skipAudio = (waveform, amount) => { 1837 if (!waveform) 1838 return; 1839 waveform.skip(amount); 1840}; 1841const getSkipRewindAmount = (audioDuration, skip_length) => { 1842 if (!skip_length) { 1843 skip_length = 5; 1844 } 1845 return audioDuration / 100 * skip_length || 5; 1846}; 1847 1848let t$1 = class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener;}addEventListener(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==i?void 0:i.once){const i=()=>{this.removeEventListener(t,i),this.removeEventListener(t,e);};return this.addEventListener(t,i),i}return ()=>this.removeEventListener(t,e)}removeEventListener(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e);}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={};}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)));}};let e$1 = class e extends t$1{constructor(t){super(),this.subscriptions=[],this.options=t;}onInit(){}init(t){this.wavesurfer=t,this.onInit();}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()));}};function i$1(t,e,i,n,s=5){let r=()=>{};if(!t)return r;const o=o=>{if(2===o.button)return;o.preventDefault(),o.stopPropagation(),t.style.touchAction="none";let a=o.clientX,h=o.clientY,l=!1;const d=n=>{n.preventDefault(),n.stopPropagation();const r=n.clientX,o=n.clientY;if(l||Math.abs(r-a)>=s||Math.abs(o-h)>=s){const{left:n,top:s}=t.getBoundingClientRect();l||(l=!0,null==i||i(a-n,h-s)),e(r-a,o-h,r-n,o-s),a=r,h=o;}},u=t=>{l&&(t.preventDefault(),t.stopPropagation());},c=()=>{t.style.touchAction="",l&&(null==n||n()),r();};document.addEventListener("pointermove",d),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",u,!0),r=()=>{document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",u,!0);}),10);};};return t.addEventListener("pointerdown",o),()=>{r(),t.removeEventListener("pointerdown",o);}}class n extends t$1{constructor(t,e,i=0){var n,s,r,o,a,h,l;super(),this.totalDuration=e,this.numberOfChannels=i,this.minLength=0,this.maxLength=1/0,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=this.clampPosition(t.start),this.end=this.clampPosition(null!==(n=t.end)&&void 0!==n?n:t.start),this.drag=null===(s=t.drag)||void 0===s||s,this.resize=null===(r=t.resize)||void 0===r||r,this.color=null!==(o=t.color)&&void 0!==o?o:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(a=t.minLength)&&void 0!==a?a:this.minLength,this.maxLength=null!==(h=t.maxLength)&&void 0!==h?h:this.maxLength,this.channelIdx=null!==(l=t.channelIdx)&&void 0!==l?l:-1,this.element=this.initElement(),this.setContent(t.content),this.setPart(),this.renderPosition(),this.initMouseEvents();}clampPosition(t){return Math.max(0,Math.min(this.totalDuration,t))}setPart(){const t=this.start===this.end;this.element.setAttribute("part",`${t?"marker":"region"} ${this.id}`);}addResizeHandles(t){const e=document.createElement("div");e.setAttribute("data-resize","left"),e.setAttribute("style","\n position: absolute;\n z-index: 2;\n width: 6px;\n height: 100%;\n top: 0;\n left: 0;\n border-left: 2px solid rgba(0, 0, 0, 0.5);\n border-radius: 2px 0 0 2px;\n cursor: ew-resize;\n word-break: keep-all;\n "),e.setAttribute("part","region-handle region-handle-left");const n=e.cloneNode();n.setAttribute("data-resize","right"),n.style.left="",n.style.right="0",n.style.borderRight=n.style.borderLeft,n.style.borderLeft="",n.style.borderRadius="0 2px 2px 0",n.setAttribute("part","region-handle region-handle-right"),t.appendChild(e),t.appendChild(n);i$1(e,(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing()),1),i$1(n,(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing()),1);}removeResizeHandles(t){const e=t.querySelector('[data-resize="left"]'),i=t.querySelector('[data-resize="right"]');e&&t.removeChild(e),i&&t.removeChild(i);}initElement(){const t=document.createElement("div"),e=this.start===this.end;let i=0,n=100;return this.channelIdx>=0&&this.channelIdx<this.numberOfChannels&&(n=100/this.numberOfChannels,i=n*this.channelIdx),t.setAttribute("style",`\n position: absolute;\n top: ${i}%;\n height: ${n}%;
1848\n background-color: ${e?"none":this.color};\n border-left: ${e?"2px solid "+this.color:"none"};\n border-radius: 2px;\n box-sizing: border-box;\n transition: background-color 0.2s ease;\n cursor: ${this.drag?"grab":"default"};\n pointer-events: all;\n `),!e&&this.resize&&this.addResizeHandles(t),t}renderPosition(){const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%";}initMouseEvents(){const{element:t}=this;t&&(t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),i$1(t,(t=>this.onMove(t)),(()=>this.onStartMoving()),(()=>this.onEndMoving())));}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing");}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"));}_onUpdate(t,e){if(!this.element.parentElement)return;const i=t/this.element.parentElement.clientWidth*this.totalDuration,n=e&&"start"!==e?this.start:this.start+i,s=e&&"end"!==e?this.end:this.end+i,r=s-n;n>=0&&s<=this.totalDuration&&n<=s&&r>=this.minLength&&r<=this.maxLength&&(this.start=n,this.end=s,this.renderPosition(),this.emit("update"));}onMove(t){this.drag&&this._onUpdate(t);}onResize(t,e){this.resize&&this._onUpdate(t,e);}onEndResizing(){this.resize&&this.emit("update-end");}_setTotalDuration(t){this.totalDuration=t,this.renderPosition();}play(){this.emit("play");}setContent(t){var e;if(null===(e=this.content)||void 0===e||e.remove(),t){if("string"==typeof t){this.content=document.createElement("div");const e=this.start===this.end;this.content.style.padding=`0.2em ${e?.2:.4}em`,this.content.textContent=t;}else this.content=t;this.content.setAttribute("part","region-content"),this.element.appendChild(this.content);}else this.content=void 0;}setOptions(t){var e,i;if(t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=this.clampPosition(null!==(e=t.start)&&void 0!==e?e:this.start),this.end=this.clampPosition(null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end),this.renderPosition(),this.setPart();}if(t.content&&this.setContent(t.content),t.id&&(this.id=t.id,this.setPart()),void 0!==t.resize&&t.resize!==this.resize){const e=this.start===this.end;this.resize=t.resize,this.resize&&!e?this.addResizeHandles(this.element):this.removeResizeHandles(this.element);}}remove(){this.emit("remove"),this.element.remove(),this.element=null;}}let s$1 = class s extends e$1{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer();}static create(t){return new s(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer);let t=[];this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.filter((t=>t.start<=e&&t.end>=e));i.forEach((e=>{t.includes(e)||this.emit("region-in",e);})),t.forEach((t=>{i.includes(t)||this.emit("region-out",t);})),t=i;})));}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 3;\n pointer-events: none;\n "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect().left,n=t.element.scrollWidth,s=this.regions.filter((e=>{if(e===t||!e.content)return !1;const s=e.content.getBoundingClientRect().left,r=e.element.scrollWidth;return i<s+r&&s<i+n})).map((t=>{var e;return (null===(e=t.content)||void 0===e?void 0:e.getBoundingClientRect().height)||0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${s}px`;}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t);const e=[t.on("update-end",(()=>
1848{this.avoidOverlapping(t),this.emit("region-updated",t);})),t.on("play",(()=>{var e,i;null===(e=this.wavesurfer)||void 0===e||e.play(),null===(i=this.wavesurfer)||void 0===i||i.setTime(t.start);})),t.on("click",(e=>{this.emit("region-clicked",t,e);})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e);})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t));}))];this.subscriptions.push(...e),this.emit("region-created",t);}addRegion(t){var e,i;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const s=this.wavesurfer.getDuration(),r=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,o=new n(t,s,r);return s?this.saveRegion(o):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{o._setTotalDuration(t),this.saveRegion(o);}))),o}enableDragSelection(t){var e,s;const r=null===(s=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===s?void 0:s.querySelector("div");if(!r)return ()=>{};let o=null,a=0;return i$1(r,((t,e,i)=>{o&&o._onUpdate(t,i>a?"end":"start");}),(e=>{var i,s;if(a=e,!this.wavesurfer)return;const r=this.wavesurfer.getDuration(),h=null===(s=null===(i=this.wavesurfer)||void 0===i?void 0:i.getDecodedData())||void 0===s?void 0:s.numberOfChannels,l=this.wavesurfer.getWrapper().clientWidth,d=e/l*r,u=(e+5)/l*r;o=new n(Object.assign(Object.assign({},t),{start:d,end:u}),r,h),this.regionsContainer.appendChild(o.element);}),(()=>{o&&(this.saveRegion(o),o=null);}))}clearRegions(){this.regions.forEach((t=>t.remove()));}destroy(){this.clearRegions(),super.destroy();}}; 1849 1850/* home/runner/work/gradio/gradio/js/audio/shared/VolumeLevels.svelte generated by Svelte v4.2.2 */ 1851const { 1852 SvelteComponent: SvelteComponent$9, 1853 check_outros: check_outros$6, 1854 create_component: create_component$7, 1855 destroy_component: destroy_component$7, 1856 detach: detach$9, 1857 empty: empty$6, 1858 group_outros: group_outros$6, 1859 init: init$9, 1860 insert: insert$9, 1861 mount_component: mount_component$7, 1862 safe_not_equal: safe_not_equal$9, 1863 transition_in: transition_in$7, 1864 transition_out: transition_out$7 1865} = window.__gradio__svelte__internal; 1866function create_if_block_2$5(ctx) { 1867 let volumehigh; 1868 let current; 1869 volumehigh = new VolumeHigh({}); 1870 1871 return { 1872 c() { 1873 create_component$7(volumehigh.$$.fragment); 1874 }, 1875 m(target, anchor) { 1876 mount_component$7(volumehigh, target, anchor); 1877 current = true; 1878 }, 1879 i(local) { 1880 if (current) return; 1881 transition_in$7(volumehigh.$$.fragment, local); 1882 current = true; 1883 }, 1884 o(local) { 1885 transition_out$7(volumehigh.$$.fragment, local); 1886 current = false; 1887 }, 1888 d(detaching) { 1889 destroy_component$7(volumehigh, detaching); 1890 } 1891 }; 1892} 1893 1894// (7:30) 1895function create_if_block_1$7(ctx) { 1896 let volumelow; 1897 let current; 1898 volumelow = new VolumeLow({}); 1899 1900 return { 1901 c() { 1902 create_component$7(volumelow.$$.fragment); 1903 }, 1904 m(target, anchor) { 1905 mount_component$7(volumelow, target, anchor); 1906 current = true; 1907 }, 1908 i(local) { 1909 if (current) return; 1910 transition_in$7(volumelow.$$.fragment, local); 1911 current = true; 1912 }, 1913 o(local) { 1914 transition_out$7(volumelow.$$.fragment, local); 1915 current = false; 1916 }, 1917 d(detaching) { 1918 destroy_component$7(volumelow, detaching); 1919 } 1920 }; 1921} 1922 1923// (5:0) {#if currentVolume == 0} 1924function create_if_block$8(ctx) { 1925 let volumemuted; 1926 let current; 1927 volumemuted = new VolumeMuted({}); 1928 1929 return { 1930 c() { 1931 create_component$7(volumemuted.$$.fragment); 1932 }, 1933 m(target, anchor) { 1934 mount_component$7(volumemuted, target, anchor); 1935 current = true; 1936 }, 1937 i(local) { 1938 if (current) return; 1939 transition_in$7(volumemuted.$$.fragment, local); 1940 current = true; 1941 }, 1942 o(local) { 1943 transition_out$7(volumemuted.$$.fragment, local); 1944 current = false; 1945 }, 1946 d(detaching) { 1947 destroy_component$7(volumemuted, detaching); 1948 } 1949 }; 1950} 1951 1952function create_fragment$9(ctx) { 1953 let current_block_type_index; 1954 let if_block; 1955 let if_block_anchor; 1956 let current; 1957 const if_block_creators = [create_if_block$8, create_if_block_1$7, create_if_block_2$5]; 1958 const if_blocks = []; 1959 1960 function select_block_type(ctx, dirty) { 1961 if (/*currentVolume*/ ctx[0] == 0) return 0; 1962 if (/*currentVolume*/ ctx[0] < 0.5) return 1; 1963 if (/*currentVolume*/ ctx[0] >= 0.5) return 2; 1964 return -1; 1965 } 1966 1967 if (~(current_block_type_index = select_block_type(ctx))) { 1968 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 1969 } 1970 1971 return { 1972 c() { 1973 if (if_block) if_block.c(); 1974 if_block_anchor = empty$6(); 1975 }, 1976 m(target, anchor) { 1977 if (~current_block_type_index) { 1978 if_blocks[current_block_type_index].m(target, anchor); 1979 } 1980 1981 insert$9(target, if_block_anchor, anchor); 1982 current = true; 1983 }, 1984 p(ctx, [dirty]) { 1985 let previous_block_index = current_block_type_index; 1986 current_block_type_index = select_block_type(ctx); 1987 1988 if (current_block_type_index !== previous_block_index) { 1989 if (if_block) { 1990 group_outros$6(); 1991 1992 transition_out$7(if_blocks[previous_block_index], 1, 1, () => { 1993 if_blocks[previous_block_index] = null; 1994 }); 1995 1996 check_outros$6(); 1997 } 1998 1999 if (~current_block_type_index) { 2000 if_block = if_blocks[current_block_type_index]; 2001 2002 if (!if_block) { 2003 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2004 if_block.c(); 2005 } 2006 2007 transition_in$7(if_block, 1); 2008 if_block.m(if_block_anchor.parentNode, if_block_anchor); 2009 } else { 2010 if_block = null; 2011 } 2012 } 2013 }, 2014 i(local) { 2015 if (current) return; 2016 transition_in$7(if_block); 2017 current = true; 2018 }, 2019 o(local) { 2020 transition_out$7(if_block); 2021 current = false;
2022 }, 2023 d(detaching) { 2024 if (detaching) { 2025 detach$9(if_block_anchor); 2026 } 2027 2028 if (~current_block_type_index) { 2029 if_blocks[current_block_type_index].d(detaching); 2030 } 2031 } 2032 }; 2033} 2034 2035function instance$9($$self, $$props, $$invalidate) { 2036 let { currentVolume } = $$props; 2037 2038 $$self.$$set = $$props => { 2039 if ('currentVolume' in $$props) $$invalidate(0, currentVolume = $$props.currentVolume); 2040 }; 2041 2042 return [currentVolume]; 2043} 2044 2045class VolumeLevels extends SvelteComponent$9 { 2046 constructor(options) { 2047 super(); 2048 init$9(this, options, instance$9, create_fragment$9, safe_not_equal$9, { currentVolume: 0 }); 2049 } 2050} 2051 2052const VolumeControl_svelte_svelte_type_style_lang = ''; 2053 2054/* home/runner/work/gradio/gradio/js/audio/shared/VolumeControl.svelte generated by Svelte v4.2.2 */ 2055const { 2056 SvelteComponent: SvelteComponent$8, 2057 attr: attr$6, 2058 binding_callbacks: binding_callbacks$7, 2059 detach: detach$8, 2060 element: element$6, 2061 init: init$8, 2062 insert: insert$8, 2063 listen: listen$3, 2064 noop: noop$4, 2065 run_all: run_all$2, 2066 safe_not_equal: safe_not_equal$8 2067} = window.__gradio__svelte__internal; 2068const { onMount: onMount$3 } = window.__gradio__svelte__internal; 2069function create_fragment$8(ctx) { 2070 let input; 2071 let mounted; 2072 let dispose; 2073 2074 return { 2075 c() { 2076 input = element$6("input"); 2077 attr$6(input, "id", "volume"); 2078 attr$6(input, "class", "volume-slider svelte-wuo8j5"); 2079 attr$6(input, "type", "range"); 2080 attr$6(input, "min", "0"); 2081 attr$6(input, "max", "1"); 2082 attr$6(input, "step", "0.01"); 2083 input.value = /*currentVolume*/ ctx[0]; 2084 }, 2085 m(target, anchor) { 2086 insert$8(target, input, anchor); 2087 /*input_binding*/ ctx[4](input); 2088 2089 if (!mounted) { 2090 dispose = [ 2091 listen$3(input, "focusout", /*focusout_handler*/ ctx[5]), 2092 listen$3(input, "input", /*input_handler*/ ctx[6]) 2093 ]; 2094 2095 mounted = true; 2096 } 2097 }, 2098 p(ctx, [dirty]) { 2099 if (dirty & /*currentVolume*/ 1) { 2100 input.value = /*currentVolume*/ ctx[0]; 2101 } 2102 }, 2103 i: noop$4, 2104 o: noop$4, 2105 d(detaching) { 2106 if (detaching) { 2107 detach$8(input); 2108 } 2109 2110 /*input_binding*/ ctx[4](null); 2111 mounted = false; 2112 run_all$2(dispose); 2113 } 2114 }; 2115} 2116 2117function instance$8($$self, $$props, $$invalidate) { 2118 let { currentVolume = 1 } = $$props; 2119 let { show_volume_slider = false } = $$props; 2120 let { waveform } = $$props; 2121 let volumeElement; 2122 2123 onMount$3(() => { 2124 adjustSlider(); 2125 }); 2126 2127 const adjustSlider = () => { 2128 let slider = volumeElement; 2129 if (!slider) return; 2130 slider.style.background = `linear-gradient(to right, var(--color-accent) ${currentVolume * 100}%, var(--neutral-400) ${currentVolume * 100}%)`; 2131 }; 2132 2133 function input_binding($$value) { 2134 binding_callbacks$7[$$value ? 'unshift' : 'push'](() => { 2135 volumeElement = $$value; 2136 $$invalidate(3, volumeElement); 2137 }); 2138 } 2139 2140 const focusout_handler = () =>
2140 $$invalidate(1, show_volume_slider = false); 2141 2142 const input_handler = e => { 2143 if (e.target instanceof HTMLInputElement) { 2144 $$invalidate(0, currentVolume = parseFloat(e.target.value)); 2145 waveform.setVolume(currentVolume); 2146 } 2147 }; 2148 2149 $$self.$$set = $$props => { 2150 if ('currentVolume' in $$props) $$invalidate(0, currentVolume = $$props.currentVolume); 2151 if ('show_volume_slider' in $$props) $$invalidate(1, show_volume_slider = $$props.show_volume_slider); 2152 if ('waveform' in $$props) $$invalidate(2, waveform = $$props.waveform); 2153 }; 2154 2155 $$self.$$.update = () => { 2156 if ($$self.$$.dirty & /*currentVolume*/ 1) { 2157 (adjustSlider()); 2158 } 2159 }; 2160 2161 return [ 2162 currentVolume, 2163 show_volume_slider, 2164 waveform, 2165 volumeElement, 2166 input_binding, 2167 focusout_handler, 2168 input_handler 2169 ]; 2170} 2171 2172class VolumeControl extends SvelteComponent$8 { 2173 constructor(options) { 2174 super(); 2175 2176 init$8(this, options, instance$8, create_fragment$8, safe_not_equal$8, { 2177 currentVolume: 0, 2178 show_volume_slider: 1, 2179 waveform: 2 2180 }); 2181 } 2182} 2183 2184const WaveformControls_svelte_svelte_type_style_lang = ''; 2185 2186/* home/runner/work/gradio/gradio/js/audio/shared/WaveformControls.svelte generated by Svelte v4.2.2 */ 2187const { 2188 SvelteComponent: SvelteComponent$7, 2189 add_flush_callback: add_flush_callback$4, 2190 append: append$5, 2191 attr: attr$5, 2192 bind: bind$4, 2193 binding_callbacks: binding_callbacks$6, 2194 check_outros: check_outros$5, 2195 create_component: create_component$6, 2196 destroy_component: destroy_component$6, 2197 detach: detach$7, 2198 element: element$5, 2199 empty: empty$5, 2200 group_outros: group_outros$5, 2201 init: init$7, 2202 insert: insert$7, 2203 listen: listen$2, 2204 mount_component: mount_component$6, 2205 noop: noop$3, 2206 run_all: run_all$1, 2207 safe_not_equal: safe_not_equal$7, 2208 set_data: set_data$4, 2209 set_style: set_style$1, 2210 space: space$7, 2211 text: text$4, 2212 toggle_class, 2213 transition_in: transition_in$6, 2214 transition_out: transition_out$6 2215} = window.__gradio__svelte__internal; 2216function create_if_block_4$1(ctx) { 2217 let volumecontrol; 2218 let updating_currentVolume; 2219 let updating_show_volume_slider; 2220 let current; 2221 2222 function volumecontrol_currentVolume_binding(value) { 2223 /*volumecontrol_currentVolume_binding*/ ctx[26](value); 2224 } 2225 2226 function volumecontrol_show_volume_slider_binding(value) { 2227 /*volumecontrol_show_volume_slider_binding*/ ctx[27](value); 2228 } 2229 2230 let volumecontrol_props = { waveform: /*waveform*/ ctx[2] }; 2231 2232 if (/*currentVolume*/ ctx[11] !== void 0) { 2233 volumecontrol_props.currentVolume = /*currentVolume*/ ctx[11]; 2234 } 2235 2236 if (/*show_volume_slider*/ ctx[1] !== void 0) { 2237 volumecontrol_props.show_volume_slider = /*show_volume_slider*/ ctx[1]; 2238 } 2239 2240 volumecontrol = new VolumeControl({ props: volumecontrol_props }); 2241 binding_callbacks$6.push(() => bind$4(volumecontrol, 'currentVolume', volumecontrol_currentVolume_binding)); 2242 binding_callbacks$6.push(() => bind$4(volumecontrol, 'show_volume_slider', volumecontrol_show_volume_slider_binding)); 2243 2244 return { 2245 c() { 2246 create_component$6(volumecontrol.$$.fragment); 2247 }, 2248 m(target, anchor) { 2249 mount_component$6(volumecontrol, target, anchor); 2250 current = true; 2251 }, 2252 p(ctx, dirty) { 2253 const volumecontrol_changes = {}; 2254 if (dirty[0] & /*waveform*/ 4) volumecontrol_changes.waveform = /*waveform*/ ctx[2]; 2255 2256 if (!updating_currentVolume && dirty[0] & /*currentVolume*/ 2048) { 2257 updating_currentVolume = true; 2258 volumecontrol_changes.currentVolume = /*currentVolume*/ ctx[11]; 2259 add_flush_callback$4(() => updating_currentVolume = false); 2260 } 2261 2262 if (!updating_show_volume_slider && dirty[0] & /*show_volume_slider*/ 2) { 2263 updating_show_volume_slider = true; 2264 volumecontrol_changes.show_volume_slider = /*show_volume_slider*/ ctx[1]; 2265 add_flush_callback$4(() => updating_show_volume_slider = false); 2266 } 2267 2268 volumecontrol.$set(volumecontrol_changes); 2269 }, 2270 i(local) { 2271 if (current) return; 2272 transition_in$6(volumecontrol.$$.fragment, local); 2273 current = true; 2274 }, 2275 o(local) { 2276 transition_out$6(volumecontrol.$$.fragment, local); 2277 current = false; 2278 }, 2279 d(detaching) { 2280 destroy_component$6(volumecontrol, detaching); 2281 } 2282 }; 2283} 2284 2285// (198:3) {:else} 2286function create_else_block_1$1(ctx) { 2287 let play; 2288 let current; 2289 play = new Play({}); 2290 2291 return { 2292 c() { 2293 create_component$6(play.$$.fragment); 2294 }, 2295 m(target, anchor) { 2296 mount_component$6(play, target, anchor); 2297 current = true; 2298 }, 2299 i(local) { 2300 if (current) return; 2301 transition_in$6(play.$$.fragment, local); 2302 current = true; 2303 }, 2304 o(local) { 2305 transition_out$6(play.$$.fragment, local); 2306 current = false;
2307 }, 2308 d(detaching) { 2309 destroy_component$6(play, detaching); 2310 } 2311 }; 2312} 2313 2314// (196:3) {#if playing} 2315function create_if_block_3$3(ctx) { 2316 let pause; 2317 let current; 2318 pause = new Pause({}); 2319 2320 return { 2321 c() { 2322 create_component$6(pause.$$.fragment); 2323 }, 2324 m(target, anchor) { 2325 mount_component$6(pause, target, anchor); 2326 current = true; 2327 }, 2328 i(local) { 2329 if (current) return; 2330 transition_in$6(pause.$$.fragment, local); 2331 current = true; 2332 }, 2333 o(local) { 2334 transition_out$6(pause.$$.fragment, local); 2335 current = false; 2336 }, 2337 d(detaching) { 2338 destroy_component$6(pause, detaching); 2339 } 2340 }; 2341} 2342 2343// (218:2) {#if showRedo && mode === ""} 2344function create_if_block_2$4(ctx) { 2345 let button; 2346 let undo; 2347 let current; 2348 let mounted; 2349 let dispose; 2350 undo = new Undo({}); 2351 2352 return { 2353 c() { 2354 button = element$5("button"); 2355 create_component$6(undo.$$.fragment); 2356 attr$5(button, "class", "action icon svelte-t8ovdf"); 2357 attr$5(button, "aria-label", "Reset audio"); 2358 }, 2359 m(target, anchor) { 2360 insert$7(target, button, anchor); 2361 mount_component$6(undo, button, null); 2362 current = true; 2363 2364 if (!mounted) { 2365 dispose = listen$2(button, "click", /*click_handler_5*/ ctx[32]); 2366 mounted = true; 2367 } 2368 }, 2369 p: noop$3, 2370 i(local) { 2371 if (current) return; 2372 transition_in$6(undo.$$.fragment, local); 2373 current = true; 2374 }, 2375 o(local) { 2376 transition_out$6(undo.$$.fragment, local); 2377 current = false; 2378 }, 2379 d(detaching) { 2380 if (detaching) { 2381 detach$7(button); 2382 } 2383 2384 destroy_component$6(undo); 2385 mounted = false; 2386 dispose(); 2387 } 2388 }; 2389} 2390 2391// (232:2) {#if interactive} 2392function create_if_block$7(ctx) { 2393 let current_block_type_index; 2394 let if_block; 2395 let if_block_anchor; 2396 let current; 2397 const if_block_creators = [create_if_block_1$6, create_else_block$7]; 2398 const if_blocks = []; 2399 2400 function select_block_type_1(ctx, dirty) { 2401 if (/*mode*/ ctx[0] === "") return 0; 2402 return 1; 2403 } 2404 2405 current_block_type_index = select_block_type_1(ctx); 2406 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2407 2408 return { 2409 c() { 2410 if_block.c(); 2411 if_block_anchor = empty$5(); 2412 }, 2413 m(target, anchor) { 2414 if_blocks[current_block_type_index].m(target, anchor); 2415 insert$7(target, if_block_anchor, anchor); 2416 current = true; 2417 }, 2418 p(ctx, dirty) { 2419 let previous_block_index = current_block_type_index; 2420 current_block_type_index = select_block_type_1(ctx); 2421 2422 if (current_block_type_index === previous_block_index) { 2423 if_blocks[current_block_type_index].p(ctx, dirty); 2424 } else { 2425 group_outros$5(); 2426 2427 transition_out$6(if_blocks[previous_block_index], 1, 1, () => { 2428 if_blocks[previous_block_index] = null; 2429 }); 2430 2431 check_outros$5(); 2432 if_block = if_blocks[current_block_type_index]; 2433 2434 if (!if_block) { 2435 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2436 if_block.c(); 2437 } else { 2438 if_block.p(ctx, dirty); 2439 } 2440 2441 transition_in$6(if_block, 1); 2442 if_block.m(if_block_anchor.parentNode, if_block_anchor); 2443 } 2444 }, 2445 i(local) { 2446 if (current) return; 2447 transition_in$6(if_block); 2448 current = true; 2449 }, 2450 o(local) { 2451 transition_out$6(if_block); 2452 current = false; 2453 }, 2454 d(detaching) { 2455 if (detaching) { 2456 detach$7(if_block_anchor); 2457 } 2458 2459 if_blocks[current_block_type_index].d(detaching); 2460 } 2461 }; 2462} 2463 2464// (241:3) {:else} 2465function create_else_block$7(ctx) { 2466 let button0; 2467 let t1; 2468 let button1; 2469 let mounted; 2470 let dispose; 2471 2472 return { 2473 c() { 2474 button0 = element$5("button"); 2475 button0.textContent = "Trim"; 2476 t1 = space$7(); 2477 button1 = element$5("button"); 2478 button1.textContent = "Cancel"; 2479 attr$5(button0, "class", "text-button svelte-t8ovdf"); 2480 attr$5(button1, "class", "text-button svelte-t8ovdf"); 2481 }, 2482 m(target, anchor) { 2483 insert$7(target, button0, anchor); 2484 insert$7(target, t1, anchor); 2485 insert$7(target, button1, anchor); 2486 2487 if (!mounted) { 2488 dispose = [ 2489 listen$2(button0, "click", /*trimAudio*/ ctx[13]), 2490 listen$2(button1, "click", /*toggleTrimmingMode*/ ctx[15]) 2491 ]; 2492 2493 mounted = true; 2494 } 2495 }, 2496 p: noop$3, 2497 i: noop$3, 2498 o: noop$3, 2499 d(detaching) { 2500 if (detaching) { 2501 detach$7(button0); 2502 detach$7(t1); 2503 detach$7(button1); 2504 } 2505 2506 mounted = false;
2507 run_all$1(dispose); 2508 } 2509 }; 2510} 2511 2512// (233:3) {#if mode === ""} 2513function create_if_block_1$6(ctx) { 2514 let button; 2515 let trim; 2516 let current; 2517 let mounted; 2518 let dispose; 2519 trim = new Trim({}); 2520 2521 return { 2522 c() { 2523 button = element$5("button"); 2524 create_component$6(trim.$$.fragment); 2525 attr$5(button, "class", "action icon svelte-t8ovdf"); 2526 attr$5(button, "aria-label", "Trim audio to selection"); 2527 }, 2528 m(target, anchor) { 2529 insert$7(target, button, anchor); 2530 mount_component$6(trim, button, null); 2531 current = true; 2532 2533 if (!mounted) { 2534 dispose = listen$2(button, "click", /*toggleTrimmingMode*/ ctx[15]); 2535 mounted = true; 2536 } 2537 }, 2538 p: noop$3, 2539 i(local) { 2540 if (current) return; 2541 transition_in$6(trim.$$.fragment, local); 2542 current = true; 2543 }, 2544 o(local) { 2545 transition_out$6(trim.$$.fragment, local); 2546 current = false; 2547 }, 2548 d(detaching) { 2549 if (detaching) { 2550 detach$7(button); 2551 } 2552 2553 destroy_component$6(trim); 2554 mounted = false; 2555 dispose(); 2556 } 2557 }; 2558} 2559 2560function create_fragment$7(ctx) { 2561 let div3; 2562 let div0; 2563 let button0; 2564 let volumelevels; 2565 let t0; 2566 let t1; 2567 let button1; 2568 let span; 2569 let t2; 2570 let t3; 2571 let button1_aria_label_value; 2572 let t4; 2573 let div1; 2574 let button2; 2575 let backward; 2576 let button2_aria_label_value; 2577 let t5; 2578 let button3; 2579 let current_block_type_index; 2580 let if_block1; 2581 let button3_aria_label_value; 2582 let t6; 2583 let button4; 2584 let forward; 2585 let button4_aria_label_value; 2586 let t7; 2587 let div2; 2588 let t8; 2589 let current; 2590 let mounted; 2591 let dispose; 2592 2593 volumelevels = new VolumeLevels({ 2594 props: { currentVolume: /*currentVolume*/ ctx[11] } 2595 }); 2596 2597 let if_block0 = /*show_volume_slider*/ ctx[1] && create_if_block_4$1(ctx); 2598 backward = new Backward({}); 2599 const if_block_creators = [create_if_block_3$3, create_else_block_1$1]; 2600 const if_blocks = []; 2601 2602 function select_block_type(ctx, dirty) { 2603 if (/*playing*/ ctx[5]) return 0; 2604 return 1; 2605 } 2606 2607 current_block_type_index = select_block_type(ctx); 2608 if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2609 forward = new Forward({}); 2610 let if_block2 = /*showRedo*/ ctx[6] && /*mode*/ ctx[0] === "" && create_if_block_2$4(ctx); 2611 let if_block3 = /*interactive*/ ctx[7] && create_if_block$7(ctx); 2612 2613 return { 2614 c() { 2615 div3 = element$5("div"); 2616 div0 = element$5("div"); 2617 button0 = element$5("button"); 2618 create_component$6(volumelevels.$$.fragment); 2619 t0 = space$7(); 2620 if (if_block0) if_block0.c(); 2621 t1 = space$7(); 2622 button1 = element$5("button"); 2623 span = element$5("span"); 2624 t2 = text$4(/*playbackSpeed*/ ctx[10]); 2625 t3 = text$4("x"); 2626 t4 = space$7(); 2627 div1 = element$5("div"); 2628 button2 = element$5("button"); 2629 create_component$6(backward.$$.fragment); 2630 t5 = space$7(); 2631 button3 = element$5("button"); 2632 if_block1.c(); 2633 t6 = space$7(); 2634 button4 = element$5("button"); 2635 create_component$6(forward.$$.fragment); 2636 t7 = space$7(); 2637 div2 = element$5("div"); 2638 if (if_block2) if_block2.c(); 2639 t8 = space$7(); 2640 if (if_block3) if_block3.c(); 2641 attr$5(button0, "class", "action icon volume svelte-t8ovdf"); 2642 attr$5(button0, "aria-label", "Adjust volume"); 2643 2644 set_style$1(button0, "color", /*show_volume_slider*/ ctx[1] 2645 ? "var(--color-accent)" 2646 : "var(--neutral-400)"); 2647 2648 attr$5(span, "class", "svelte-t8ovdf"); 2649 attr$5(button1, "class", "playback icon svelte-t8ovdf"); 2650 attr$5(button1, "aria-label", button1_aria_label_value = `Adjust playback speed to ${/*playbackSpeeds*/ ctx[12][(/*playbackSpeeds*/ ctx[12].indexOf(/*playbackSpeed*/ ctx[10]) + 1) % /*playbackSpeeds*/ ctx[12].length]}x`); 2651 toggle_class(button1, "hidden", /*show_volume_slider*/ ctx[1]); 2652 attr$5(div0, "class", "control-wrapper svelte-t8ovdf"); 2653 attr$5(button2, "class", "rewind icon svelte-t8ovdf"); 2654 attr$5(button2, "aria-label", button2_aria_label_value = `Skip backwards by ${getSkipRewindAmount(/*audioDuration*/ ctx[3], /*waveform_options*/ ctx[9].skip_length)} seconds`); 2655 attr$5(button3, "class", "play-pause-button icon svelte-t8ovdf"); 2656 2657 attr$5(button3, "aria-label", button3_aria_label_value = /*playing*/ ctx[5] 2658 ? /*i18n*/ ctx[4]("audio.pause") 2659 : /*i18n*/ ctx[4]("audio.play")); 2660 2661 attr$5(button4, "class", "skip icon svelte-t8ovdf"); 2662 attr$5(button4, "aria-label", button4_aria_label_value = "Skip forward by " + getSkipRewindAmount(/*audioDuration*/ ctx[3], /*waveform_options*/ ctx[9].skip_length) + " seconds"); 2663 attr$5(div1, "class", "play-pause-wrapper svelte-t8ovdf"); 2664 attr$5(div2, "class", "settings-wrapper svelte-t8ovdf"); 2665 attr$5(div3, "class", "controls svelte-t8ovdf");
2666 attr$5(div3, "data-testid", "waveform-controls"); 2667 }, 2668 m(target, anchor) { 2669 insert$7(target, div3, anchor); 2670 append$5(div3, div0); 2671 append$5(div0, button0); 2672 mount_component$6(volumelevels, button0, null); 2673 append$5(div0, t0); 2674 if (if_block0) if_block0.m(div0, null); 2675 append$5(div0, t1); 2676 append$5(div0, button1); 2677 append$5(button1, span); 2678 append$5(span, t2); 2679 append$5(span, t3); 2680 append$5(div3, t4); 2681 append$5(div3, div1); 2682 append$5(div1, button2); 2683 mount_component$6(backward, button2, null); 2684 append$5(div1, t5); 2685 append$5(div1, button3); 2686 if_blocks[current_block_type_index].m(button3, null); 2687 append$5(div1, t6); 2688 append$5(div1, button4); 2689 mount_component$6(forward, button4, null); 2690 append$5(div3, t7); 2691 append$5(div3, div2); 2692 if (if_block2) if_block2.m(div2, null); 2693 append$5(div2, t8); 2694 if (if_block3) if_block3.m(div2, null); 2695 current = true; 2696 2697 if (!mounted) { 2698 dispose = [ 2699 listen$2(button0, "click", /*click_handler*/ ctx[25]), 2700 listen$2(button1, "click", /*click_handler_1*/ ctx[28]), 2701 listen$2(button2, "click", /*click_handler_2*/ ctx[29]), 2702 listen$2(button3, "click", /*click_handler_3*/ ctx[30]), 2703 listen$2(button4, "click", /*click_handler_4*/ ctx[31]) 2704 ]; 2705 2706 mounted = true; 2707 } 2708 }, 2709 p(ctx, dirty) { 2710 const volumelevels_changes = {}; 2711 if (dirty[0] & /*currentVolume*/ 2048) volumelevels_changes.currentVolume = /*currentVolume*/ ctx[11]; 2712 volumelevels.$set(volumelevels_changes); 2713 2714 if (dirty[0] & /*show_volume_slider*/ 2) { 2715 set_style$1(button0, "color", /*show_volume_slider*/ ctx[1] 2716 ? "var(--color-accent)" 2717 : "var(--neutral-400)"); 2718 } 2719 2720 if (/*show_volume_slider*/ ctx[1]) { 2721 if (if_block0) { 2722 if_block0.p(ctx, dirty); 2723 2724 if (dirty[0] & /*show_volume_slider*/ 2) { 2725 transition_in$6(if_block0, 1); 2726 } 2727 } else { 2728 if_block0 = create_if_block_4$1(ctx); 2729 if_block0.c(); 2730 transition_in$6(if_block0, 1); 2731 if_block0.m(div0, t1); 2732 } 2733 } else if (if_block0) { 2734 group_outros$5(); 2735 2736 transition_out$6(if_block0, 1, 1, () => { 2737 if_block0 = null; 2738 }); 2739 2740 check_outros$5(); 2741 } 2742 2743 if (!current || dirty[0] & /*playbackSpeed*/ 1024) set_data$4(t2, /*playbackSpeed*/ ctx[10]); 2744 2745 if (!current || dirty[0] & /*playbackSpeed*/ 1024 && button1_aria_label_value !== (button1_aria_label_value = `Adjust playback speed to ${/*playbackSpeeds*/ ctx[12][(/*playbackSpeeds*/ ctx[12].indexOf(/*playbackSpeed*/ ctx[10]) + 1) % /*playbackSpeeds*/ ctx[12].length]}x`)) { 2746 attr$5(button1, "aria-label", button1_aria_label_value); 2747 } 2748 2749 if (!current || dirty[0] & /*show_volume_slider*/ 2) { 2750 toggle_class(button1, "hidden", /*show_volume_slider*/ ctx[1]); 2751 } 2752 2753 if (!current || dirty[0] & /*audioDuration, waveform_options*/ 520 && button2_aria_label_value !== (button2_aria_label_value = `Skip backwards by ${getSkipRewindAmount(/*audioDuration*/ ctx[3], /*waveform_options*/ ctx[9].skip_length)} seconds`)) { 2754 attr$5(button2, "aria-label", button2_aria_label_value); 2755 } 2756 2757 let previous_block_index = current_block_type_index; 2758 current_block_type_index = select_block_type(ctx); 2759 2760 if (current_block_type_index !== previous_block_index) { 2761 group_outros$5(); 2762 2763 transition_out$6(if_blocks[previous_block_index], 1, 1, () => { 2764 if_blocks[previous_block_index] = null; 2765 }); 2766 2767 check_outros$5(); 2768 if_block1 = if_blocks[current_block_type_index]; 2769 2770 if (!if_block1) { 2771 if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2772 if_block1.c(); 2773 } 2774 2775 transition_in$6(if_block1, 1); 2776 if_block1.m(button3, null); 2777 } 2778 2779 if (!current || dirty[0] & /*playing, i18n*/ 48 && button3_aria_label_value !== (button3_aria_label_value = /*playing*/ ctx[5] 2780 ? /*i18n*/ ctx[4]("audio.pause") 2781 : /*i18n*/ ctx[4]("audio.play"))) { 2782 attr$5(button3, "aria-label", button3_aria_label_value); 2783 } 2784 2785 if (!current || dirty[0] & /*audioDuration, waveform_options*/ 520 && button4_aria_label_value !== (button4_aria_label_value = "Skip forward by " + getSkipRewindAmount(/*audioDuration*/ ctx[3], /*waveform_options*/ ctx[9].skip_length) + " seconds")) { 2786 attr$5(button4, "aria-label", button4_aria_label_value); 2787 } 2788 2789 if (/*showRedo*/ ctx[6] && /*mode*/ ctx[0] === "") { 2790 if (if_block2) { 2791 if_block2.p(ctx, dirty); 2792
2793 if (dirty[0] & /*showRedo, mode*/ 65) { 2794 transition_in$6(if_block2, 1); 2795 } 2796 } else { 2797 if_block2 = create_if_block_2$4(ctx); 2798 if_block2.c(); 2799 transition_in$6(if_block2, 1); 2800 if_block2.m(div2, t8); 2801 } 2802 } else if (if_block2) { 2803 group_outros$5(); 2804 2805 transition_out$6(if_block2, 1, 1, () => { 2806 if_block2 = null; 2807 }); 2808 2809 check_outros$5(); 2810 } 2811 2812 if (/*interactive*/ ctx[7]) { 2813 if (if_block3) { 2814 if_block3.p(ctx, dirty); 2815 2816 if (dirty[0] & /*interactive*/ 128) { 2817 transition_in$6(if_block3, 1); 2818 } 2819 } else { 2820 if_block3 = create_if_block$7(ctx); 2821 if_block3.c(); 2822 transition_in$6(if_block3, 1); 2823 if_block3.m(div2, null); 2824 } 2825 } else if (if_block3) { 2826 group_outros$5(); 2827 2828 transition_out$6(if_block3, 1, 1, () => { 2829 if_block3 = null; 2830 }); 2831 2832 check_outros$5(); 2833 } 2834 }, 2835 i(local) { 2836 if (current) return; 2837 transition_in$6(volumelevels.$$.fragment, local); 2838 transition_in$6(if_block0); 2839 transition_in$6(backward.$$.fragment, local); 2840 transition_in$6(if_block1); 2841 transition_in$6(forward.$$.fragment, local); 2842 transition_in$6(if_block2); 2843 transition_in$6(if_block3); 2844 current = true; 2845 }, 2846 o(local) { 2847 transition_out$6(volumelevels.$$.fragment, local); 2848 transition_out$6(if_block0); 2849 transition_out$6(backward.$$.fragment, local); 2850 transition_out$6(if_block1); 2851 transition_out$6(forward.$$.fragment, local); 2852 transition_out$6(if_block2); 2853 transition_out$6(if_block3); 2854 current = false; 2855 }, 2856 d(detaching) { 2857 if (detaching) { 2858 detach$7(div3); 2859 } 2860 2861 destroy_component$6(volumelevels); 2862 if (if_block0) if_block0.d(); 2863 destroy_component$6(backward); 2864 if_blocks[current_block_type_index].d(); 2865 destroy_component$6(forward); 2866 if (if_block2) if_block2.d(); 2867 if (if_block3) if_block3.d(); 2868 mounted = false; 2869 run_all$1(dispose); 2870 } 2871 }; 2872} 2873 2874function instance$7($$self, $$props, $$invalidate) { 2875 let { waveform } = $$props; 2876 let { audioDuration } = $$props; 2877 let { i18n } = $$props; 2878 let { playing } = $$props; 2879 let { showRedo = false } = $$props; 2880 let { interactive = false } = $$props; 2881 let { handle_trim_audio } = $$props; 2882 let { mode = "" } = $$props; 2883 let { container } = $$props; 2884 let { handle_reset_value } = $$props; 2885 let { waveform_options = {} } = $$props; 2886 let { trim_region_settings = {} } = $$props; 2887 let { show_volume_slider = false } = $$props; 2888 let { trimDuration = 0 } = $$props; 2889 let playbackSpeeds = [0.5, 1, 1.5, 2]; 2890 let playbackSpeed = playbackSpeeds[1]; 2891 let trimRegion; 2892 let activeRegion = null; 2893 let leftRegionHandle; 2894 let rightRegionHandle; 2895 let activeHandle = ""; 2896 let currentVolume = 1; 2897 2898 const addTrimRegion = () => { 2899 $$invalidate(21, activeRegion = trimRegion.addRegion({ 2900 start: audioDuration / 4, 2901 end: audioDuration / 2, 2902 ...trim_region_settings 2903 })); 2904 2905 $$invalidate(16, trimDuration = activeRegion.end - activeRegion.start); 2906 }; 2907 2908 const trimAudio = () => { 2909 if (waveform && trimRegion) { 2910 if (activeRegion) { 2911 const start = activeRegion.start; 2912 const end = activeRegion.end; 2913 handle_trim_audio(start, end); 2914 $$invalidate(0, mode = ""); 2915 $$invalidate(21, activeRegion = null); 2916 } 2917 } 2918 }; 2919 2920 const clearRegions = () => { 2921 trimRegion?.getRegions().forEach(region => { 2922 region.remove(); 2923 }); 2924 2925 trimRegion?.clearRegions(); 2926 }; 2927 2928 const toggleTrimmingMode = () => { 2929 clearRegions(); 2930 2931 if (mode === "edit") { 2932 $$invalidate(0, mode = ""); 2933 } else { 2934 $$invalidate(0, mode = "edit"); 2935 addTrimRegion(); 2936 } 2937 }; 2938 2939 const adjustRegionHandles = (handle, key) => { 2940 let newStart; 2941 let newEnd; 2942 if (!activeRegion) return; 2943 2944 if (handle === "left") { 2945 if (key === "ArrowLeft") { 2946 newStart = activeRegion.start - 0.05; 2947 newEnd = activeRegion.end; 2948 } else { 2949 newStart = activeRegion.start + 0.05; 2950 newEnd = activeRegion.end; 2951 } 2952 } else { 2953 if (key === "ArrowLeft") { 2954 newStart = activeRegion.start; 2955 newEnd = activeRegion.end - 0.05; 2956 } else { 2957 newStart = activeRegion.start; 2958 newEnd = activeRegion.end + 0.05; 2959 } 2960 } 2961 2962 activeRegion.setOptions({ start: newStart, end: newEnd });
2963 $$invalidate(16, trimDuration = activeRegion.end - activeRegion.start); 2964 }; 2965 2966 const click_handler = () => $$invalidate(1, show_volume_slider = !show_volume_slider); 2967 2968 function volumecontrol_currentVolume_binding(value) { 2969 currentVolume = value; 2970 $$invalidate(11, currentVolume); 2971 } 2972 2973 function volumecontrol_show_volume_slider_binding(value) { 2974 show_volume_slider = value; 2975 $$invalidate(1, show_volume_slider); 2976 } 2977 2978 const click_handler_1 = () => { 2979 $$invalidate(10, playbackSpeed = playbackSpeeds[(playbackSpeeds.indexOf(playbackSpeed) + 1) % playbackSpeeds.length]); 2980 waveform.setPlaybackRate(playbackSpeed); 2981 }; 2982 2983 const click_handler_2 = () => waveform.skip(getSkipRewindAmount(audioDuration, waveform_options.skip_length) * -1); 2984 const click_handler_3 = () => waveform.playPause(); 2985 const click_handler_4 = () => waveform.skip(getSkipRewindAmount(audioDuration, waveform_options.skip_length)); 2986 2987 const click_handler_5 = () => { 2988 handle_reset_value(); 2989 clearRegions(); 2990 $$invalidate(0, mode = ""); 2991 }; 2992 2993 $$self.$$set = $$props => {
2994 if ('waveform' in $$props) $$invalidate(2, waveform = $$props.waveform); 2995 if ('audioDuration' in $$props) $$invalidate(3, audioDuration = $$props.audioDuration); 2996 if ('i18n' in $$props) $$invalidate(4, i18n = $$props.i18n); 2997 if ('playing' in $$props) $$invalidate(5, playing = $$props.playing); 2998 if ('showRedo' in $$props) $$invalidate(6, showRedo = $$props.showRedo); 2999 if ('interactive' in $$props) $$invalidate(7, interactive = $$props.interactive); 3000 if ('handle_trim_audio' in $$props) $$invalidate(17, handle_trim_audio = $$props.handle_trim_audio); 3001 if ('mode' in $$props) $$invalidate(0, mode = $$props.mode); 3002 if ('container' in $$props) $$invalidate(18, container = $$props.container); 3003 if ('handle_reset_value' in $$props) $$invalidate(8, handle_reset_value = $$props.handle_reset_value); 3004 if ('waveform_options' in $$props) $$invalidate(9, waveform_options = $$props.waveform_options); 3005 if ('trim_region_settings' in $$props) $$invalidate(19, trim_region_settings = $$props.trim_region_settings); 3006 if ('show_volume_slider' in $$props) $$invali
3006date(1, show_volume_slider = $$props.show_volume_slider); 3007 if ('trimDuration' in $$props) $$invalidate(16, trimDuration = $$props.trimDuration); 3008 }; 3009 3010 $$self.$$.update = () => { 3011 if ($$self.$$.dirty[0] & /*waveform*/ 4) { 3012 $$invalidate(20, trimRegion = waveform.registerPlugin(s$1.create())); 3013 } 3014 3015 if ($$self.$$.dirty[0] & /*trimRegion*/ 1048576) { 3016 trimRegion?.on("region-out", region => { 3017 region.play(); 3018 }); 3019 } 3020 3021 if ($$self.$$.dirty[0] & /*trimRegion*/ 1048576) { 3022 trimRegion?.on("region-updated", region => { 3023 $$invalidate(16, trimDuration = region.end - region.start); 3024 }); 3025 } 3026 3027 if ($$self.$$.dirty[0] & /*trimRegion*/ 1048576) { 3028 trimRegion?.on("region-clicked", (region, e) => { 3029 e.stopPropagation(); // prevent triggering a click on the waveform 3030 $$invalidate(21, activeRegion = region); 3031 region.play(); 3032 }); 3033 } 3034 3035 if ($$self.$$.dirty[0] & /*activeRegion, container, leftRegionHandle, rightRegionHandle, trimRegion*/ 15990784) { 3036 if (activeRegion) { 3037 const shadowRoot = container.children[0].shadowRoot; 3038 $$invalidate(23, rightRegionHandle = shadowRoot.querySelector('[data-resize="right"]')); 3039 $$invalidate(22, leftRegionHandle = shadowRoot.querySelector('[data-resize="left"]')); 3040 3041 if (leftRegionHandle && rightRegionHandle) { 3042 leftRegionHandle.setAttribute("role", "button"); 3043 rightRegionHandle.setAttribute("role", "button"); 3044 leftRegionHandle?.setAttribute("aria-label", "Drag to adjust start time"); 3045 rightRegionHandle?.setAttribute("aria-label", "Drag to adjust end time"); 3046 leftRegionHandle?.setAttribute("tabindex", "0"); 3047 rightRegionHandle?.setAttribute("tabindex", "0"); 3048 3049 leftRegionHandle.addEventListener("focus", () => {
3050 if (trimRegion) $$invalidate(24, activeHandle = "left"); 3051 }); 3052 3053 rightRegionHandle.addEventListener("focus", () => { 3054 if (trimRegion) $$invalidate(24, activeHandle = "right"); 3055 }); 3056 } 3057 } 3058 } 3059 3060 if ($$self.$$.dirty[0] & /*trimRegion, activeHandle*/ 17825792) { 3061 trimRegion && window.addEventListener("keydown", e => { 3062 if (e.key === "ArrowLeft") { 3063 adjustRegionHandles(activeHandle, "ArrowLeft"); 3064 } else if (e.key === "ArrowRight") { 3065 adjustRegionHandles(activeHandle, "ArrowRight"); 3066 } 3067 }); 3068 } 3069 }; 3070 3071 return [ 3072 mode, 3073 show_volume_slider, 3074 waveform, 3075 audioDuration, 3076 i18n, 3077 playing, 3078 showRedo, 3079 interactive, 3080 handle_reset_value, 3081 waveform_options, 3082 playbackSpeed, 3083 currentVolume, 3084 playbackSpeeds, 3085 trimAudio, 3086 clearRegions, 3087 toggleTrimmingMode, 3088 trimDuration, 3089 handle_trim_audio, 3090 container, 3091 trim_region_settings, 3092 trimRegion, 3093 activeRegion, 3094 leftRegionHandle, 3095 rightRegionHandle, 3096 activeHandle, 3097 click_handler, 3098 volumecontrol_currentVolume_binding, 3099 volumecontrol_show_volume_slider_binding, 3100 click_handler_1, 3101 click_handler_2, 3102 click_handler_3, 3103 click_handler_4, 3104 click_handler_5 3105 ]; 3106} 3107 3108class WaveformControls extends SvelteComponent$7 { 3109 constructor(options) { 3110 super(); 3111 3112 init$7( 3113 this, 3114 options, 3115 instance$7, 3116 create_fragment$7, 3117 safe_not_equal$7, 3118 { 3119 waveform: 2, 3120 audioDuration: 3, 3121 i18n: 4, 3122 playing: 5, 3123 showRedo: 6, 3124 interactive: 7, 3125 handle_trim_audio: 17, 3126 mode: 0, 3127 container: 18, 3128 handle_reset_value: 8, 3129 waveform_options: 9, 3130 trim_region_settings: 19, 3131 show_volume_slider: 1, 3132 trimDuration: 16 3133 }, 3134 null, 3135 [-1, -1] 3136 ); 3137 } 3138} 3139 3140const AudioPlayer_svelte_svelte_type_style_lang = ''; 3141 3142/* home/runner/work/gradio/gradio/js/audio/player/AudioPlayer.svelte generated by Svelte v4.2.2 */ 3143const { 3144 SvelteComponent: SvelteComponent$6, 3145 add_flush_callback: add_flush_callback$3, 3146 append: append$4, 3147 attr: attr$4, 3148 bind: bind$3, 3149 binding_callbacks: binding_callbacks$5, 3150 check_outros: check_outros$4, 3151 create_component: create_component$5, 3152 destroy_component: destroy_component$5, 3153 detach: detach$6, 3154 element: element$4, 3155 empty: empty$4, 3156 group_outros: group_outros$4, 3157 init: init$6, 3158 insert: insert$6, 3159 mount_component: mount_component$5, 3160 noop: noop$2, 3161 safe_not_equal: safe_not_equal$6, 3162 set_data: set_data$3, 3163 space: space$6, 3164 src_url_equal, 3165 text: text$3, 3166 transition_in: transition_in$5, 3167 transition_out: transition_out$5 3168} = window.__gradio__svelte__internal; 3169const { onMount: onMount$2 } = window.__gradio__svelte__internal;const { createEventDispatcher: createEventDispatcher$4 } = window.__gradio__svelte__internal; 3170function create_else_block$6(ctx) { 3171 let div4; 3172 let div1; 3173 let div0; 3174 let t0; 3175 let div3; 3176 let time0; 3177 let t2; 3178 let div2; 3179 let t3; 3180 let time1; 3181 let t5; 3182 let div4_data_testid_value; 3183 let current; 3184 let if_block0 = /*mode*/ ctx[0] === "edit" && /*trimDuration*/ ctx[15] > 0 && create_if_block_3$2(ctx); 3185 let if_block1 = /*waveform*/ ctx[10] && create_if_block_2$3(ctx); 3186 3187 return { 3188 c() { 3189 div4 = element$4("div"); 3190 div1 = element$4("div"); 3191 div0 = element$4("div"); 3192 t0 = space$6(); 3193 div3 = element$4("div"); 3194 time0 = element$4("time"); 3195 time0.textContent = "0:00"; 3196 t2 = space$6(); 3197 div2 = element$4("div"); 3198 if (if_block0) if_block0.c(); 3199 t3 = space$6(); 3200 time1 = element$4("time"); 3201 time1.textContent = "0:00"; 3202 t5 = space$6(); 3203 if (if_block1) if_block1.c(); 3204 attr$4(div0, "id", "waveform"); 3205 attr$4(div0, "class", "svelte-1n70sxb"); 3206 attr$4(div1, "class", "waveform-container svelte-1n70sxb"); 3207 attr$4(time0, "id", "time"); 3208 attr$4(time0, "class", "svelte-1n70sxb"); 3209 attr$4(time1, "id", "duration"); 3210 attr$4(time1, "class", "svelte-1n70sxb"); 3211 attr$4(div3, "class", "timestamps svelte-1n70sxb"); 3212 attr$4(div4, "class", "component-wrapper svelte-1n70sxb"); 3213 3214 attr$4(div4, "data-testid", div4_data_testid_value = /*label*/ ctx[2] 3215 ? "waveform-" + /*label*/ ctx[2] 3216 : "unlabelled-audio"); 3217 }, 3218 m(target, anchor) { 3219 insert$6(target, div4, anchor); 3220 append$4(div4, div1); 3221 append$4(div1, div0); 3222 /*div0_binding*/ ctx[21](div0); 3223 append$4(div4, t0); 3224 append$4(div4, div3);
3225 append$4(div3, time0); 3226 /*time0_binding*/ ctx[22](time0); 3227 append$4(div3, t2); 3228 append$4(div3, div2); 3229 if (if_block0) if_block0.m(div2, null); 3230 append$4(div2, t3); 3231 append$4(div2, time1); 3232 /*time1_binding*/ ctx[23](time1); 3233 append$4(div4, t5); 3234 if (if_block1) if_block1.m(div4, null); 3235 current = true; 3236 }, 3237 p(ctx, dirty) { 3238 if (/*mode*/ ctx[0] === "edit" && /*trimDuration*/ ctx[15] > 0) { 3239 if (if_block0) { 3240 if_block0.p(ctx, dirty); 3241 } else { 3242 if_block0 = create_if_block_3$2(ctx); 3243 if_block0.c(); 3244 if_block0.m(div2, t3); 3245 } 3246 } else if (if_block0) { 3247 if_block0.d(1); 3248 if_block0 = null; 3249 } 3250 3251 if (/*waveform*/ ctx[10]) { 3252 if (if_block1) { 3253 if_block1.p(ctx, dirty); 3254 3255 if (dirty & /*waveform*/ 1024) { 3256 transition_in$5(if_block1, 1); 3257 } 3258 } else { 3259 if_block1 = create_if_block_2$3(ctx); 3260 if_block1.c(); 3261 transition_in$5(if_block1, 1); 3262 if_block1.m(div4, null); 3263 } 3264 } else if (if_block1) { 3265 group_outros$4(); 3266 3267 transition_out$5(if_block1, 1, 1, () => { 3268 if_block1 = null; 3269 }); 3270 3271 check_outros$4(); 3272 } 3273 3274 if (!current || dirty & /*label*/ 4 && div4_data_testid_value !== (div4_data_testid_value = /*label*/ ctx[2] 3275 ? "waveform-" + /*label*/ ctx[2] 3276 : "unlabelled-audio")) { 3277 attr$4(div4, "data-testid", div4_data_testid_value); 3278 } 3279 }, 3280 i(local) { 3281 if (current) return; 3282 transition_in$5(if_block1); 3283 current = true; 3284 }, 3285 o(local) { 3286 transition_out$5(if_block1); 3287 current = false; 3288 }, 3289 d(detaching) { 3290 if (detaching) { 3291 detach$6(div4); 3292 } 3293 3294 /*div0_binding*/ ctx[21](null); 3295 /*time0_binding*/ ctx[22](null); 3296 if (if_block0) if_block0.d(); 3297 /*time1_binding*/ ctx[23](null); 3298 if (if_block1) if_block1.d(); 3299 } 3300 }; 3301} 3302 3303// (111:26) 3304function create_if_block_1$5(ctx) { 3305 let audio; 3306 let audio_src_value; 3307 let audio_autoplay_value; 3308 3309 return { 3310 c() { 3311 audio = element$4("audio"); 3312 attr$4(audio, "class", "standard-player svelte-1n70sxb"); 3313 if (!src_url_equal(audio.src, audio_src_value = /*value*/ ctx[1].url)) attr$4(audio, "src", audio_src_value); 3314 audio.controls = true; 3315 audio.autoplay = audio_autoplay_value = /*waveform_settings*/ ctx[6].autoplay; 3316 }, 3317 m(target, anchor) { 3318 insert$6(target, audio, anchor); 3319 }, 3320 p(ctx, dirty) { 3321 if (dirty & /*value*/ 2 && !src_url_equal(audio.src, audio_src_value = /*value*/ ctx[1].url)) { 3322 attr$4(audio, "src", audio_src_value); 3323 } 3324 3325 if (dirty & /*waveform_settings*/ 64 && audio_autoplay_value !== (audio_autoplay_value = /*waveform_settings*/ ctx[6].autoplay)) { 3326 audio.autoplay = audio_autoplay_value; 3327 } 3328 }, 3329 i: noop$2, 3330 o: noop$2, 3331 d(detaching) { 3332 if (detaching) { 3333 detach$6(audio); 3334 } 3335 } 3336 }; 3337} 3338 3339// (107:0) {#if value === null} 3340function create_if_block$6(ctx) { 3341 let empty_1; 3342 let current; 3343 3344 empty_1 = new Empty({ 3345 props: { 3346 size: "small", 3347 $$slots: { default: [create_default_slot$3] }, 3348 $$scope: { ctx } 3349 } 3350 }); 3351 3352 return { 3353 c() { 3354 create_component$5(empty_1.$$.fragment); 3355 }, 3356 m(target, anchor) { 3357 mount_component$5(empty_1, target, anchor); 3358 current = true; 3359 }, 3360 p(ctx, dirty) { 3361 const empty_1_changes = {}; 3362 3363 if (dirty & /*$$scope*/ 1073741824) { 3364 empty_1_changes.$$scope = { dirty, ctx }; 3365 } 3366 3367 empty_1.$set(empty_1_changes); 3368 }, 3369 i(local) { 3370 if (current) return; 3371 transition_in$5(empty_1.$$.fragment, local); 3372 current = true; 3373 }, 3374 o(local) { 3375 transition_out$5(empty_1.$$.fragment, local); 3376 current = false; 3377 }, 3378 d(detaching) { 3379 destroy_component$5(empty_1, detaching); 3380 } 3381 }; 3382} 3383 3384// (130:4) {#if mode === "edit" && trimDuration > 0} 3385function create_if_block_3$2(ctx) { 3386 let time; 3387 let t_value = /*formatTime*/ ctx[17](/*trimDuration*/ ctx[15]) + ""; 3388 let t; 3389 3390 return { 3391 c() { 3392 time = element$4("time"); 3393 t = text$3(t_value); 3394 attr$4(time, "id", "trim-duration"); 3395 attr$4(time, "class", "svelte-1n70sxb"); 3396 }, 3397 m(target, anchor) { 3398 insert$6(target, time, anchor); 3399 append$4(time, t); 3400 }, 3401 p(ctx, dirty) { 3402 if (dirty & /*trimDuration*/ 32768 && t_value !== (t_value = /*formatTime*/ ctx[17](/*trimDuration*/ ctx[15]) + "")) set_data$3(t, t_value); 3403 }, 3404 d(detaching) { 3405 if (detaching) { 3406 detach$6(time); 3407 } 3408 } 3409 }; 3410} 3411 3412// (137:2) {#if waveform} 3413function create_if_block_2$3(ctx) { 3414 let waveformcontrols; 3415 let updating_mode; 3416 let updating_trimDuration; 3417 let updating_show_volume_slider; 3418 let current; 3419 3420 function waveformcontrols_mode_binding(value) { 3421 /*waveformcontrols_mode_binding*/ ctx[24](value); 3422 } 3423 3424 function waveformcontrols_trimDuration_binding(value) { 3425 /*waveformcontrols_trimDuration_binding*/ ctx[25](value); 3426 } 3427 3428 function waveformcontrols_show_volume_slider_binding(value) { 3429 /*waveformcontrols_show_volume_slider_binding*/ ctx[26](value); 3430 } 3431 3432 let waveformcontrols_props = { 3433 container: /*container*/ ctx[9], 3434 waveform: /*waveform*/ ctx[10], 3435 playing: /*playing*/ ctx[13], 3436 audioDuration: /*audioDuration*/ ctx[14], 3437 i18n: /*i18n*/ ctx[3], 3438 interactive: /*interactive*/ ctx[4], 3439 handle_trim_audio: /*handle_trim_audio*/ ctx[18], 3440 showRedo: /*interactive*/ ctx[4], 3441 handle_reset_value: /*handle_reset_value*/ ctx[8], 3442 waveform_options: /*waveform_options*/ ctx[7], 3443 trim_region_settings: /*trim_region_settings*/ ctx[5] 3444 }; 3445 3446 if (/*mode*/ ctx[0] !== void 0) { 3447 waveformcontrols_props.mode = /*mode*/ ctx[0]; 3448 } 3449 3450 if (/*trimDuration*/ ctx[15] !== void 0) { 3451 waveformcontrols_props.trimDuration = /*trimDuration*/ ctx[15]; 3452 } 3453 3454 if (/*show_volume_slider*/ ctx[16] !== void 0) { 3455 waveformcontrols_props.show_volume_slider = /*show_volume_slider*/ ctx[16]; 3456 } 3457 3458 waveformcontrols = new WaveformControls({ props: waveformcontrols_props }); 3459 binding_callbacks$5.push(() => bind$3(waveformcontrols, 'mode', waveformcontrols_mode_binding)); 3460 binding_callbacks$5.push(() => bind$3(waveformcontrols, 'trimDuration', waveformcontrols_trimDuration_binding)); 3461 binding_callbacks$5.push(() => bind$3(waveformcontrols, 'show_volume_slider', waveformcontrols_show_volume_slider_binding)); 3462 3463 return { 3464 c() { 3465 create_component$5(waveformcontrols.$$.fragment); 3466 }, 3467 m(target, anchor) { 3468 mount_component$5(waveformcontrols, target, anchor); 3469 current = true; 3470 }, 3471 p(ctx, dirty) { 3472 const waveformcontrols_changes = {};
3473 if (dirty & /*container*/ 512) waveformcontrols_changes.container = /*container*/ ctx[9]; 3474 if (dirty & /*waveform*/ 1024) waveformcontrols_changes.waveform = /*waveform*/ ctx[10]; 3475 if (dirty & /*playing*/ 8192) waveformcontrols_changes.playing = /*playing*/ ctx[13]; 3476 if (dirty & /*audioDuration*/ 16384) waveformcontrols_changes.audioDuration = /*audioDuration*/ ctx[14]; 3477 if (dirty & /*i18n*/ 8) waveformcontrols_changes.i18n = /*i18n*/ ctx[3]; 3478 if (dirty & /*interactive*/ 16) waveformcontrols_changes.interactive = /*interactive*/ ctx[4]; 3479 if (dirty & /*interactive*/ 16) waveformcontrols_changes.showRedo = /*interactive*/ ctx[4]; 3480 if (dirty & /*handle_reset_value*/ 256) waveformcontrols_changes.handle_reset_value = /*handle_reset_value*/ ctx[8]; 3481 if (dirty & /*waveform_options*/ 128) waveformcontrols_changes.waveform_options = /*waveform_options*/ ctx[7]; 3482 if (dirty & /*trim_region_settings*/ 32) waveformcontrols_changes.trim_region_settings = /*trim_region_settings*/ ctx[5]; 3483 3484 if (!updating_mode && dirty & /*mode*/ 1) { 3485 updating_mode = true; 3486 waveformcontrols_changes.mode = /*mode*/ ctx[0]; 3487 add_flush_callback$3(() => updating_mode = false); 3488 } 3489 3490 if (!updating_trimDuration && dirty & /*trimDuration*/ 32768) { 3491 updating_trimDuration = true; 3492 waveformcontrols_changes.trimDuration = /*trimDuration*/ ctx[15]; 3493 add_flush_callback$3(() => updating_trimDuration = false); 3494 } 3495 3496 if (!updating_show_volume_slider && dirty & /*show_volume_slider*/ 65536) { 3497 updating_show_volume_slider = true; 3498 waveformcontrols_changes.show_volume_slider = /*show_volume_slider*/ ctx[16]; 3499 add_flush_callback$3(() => updating_show_volume_slider = false); 3500 } 3501 3502 waveformcontrols.$set(waveformcontrols_changes); 3503 }, 3504 i(local) { 3505 if (current) return; 3506 transition_in$5(waveformcontrols.$$.fragment, local); 3507 current = true; 3508 }, 3509 o(local) { 3510 transition_out$5(waveformcontrols.$$.fragment, local); 3511 current = false; 3512 }, 3513 d(detaching) { 3514 destroy_component$5(waveformcontrols, detaching); 3515 } 3516 }; 3517} 3518 3519// (108:1) <Empty size="small"> 3520function create_default_slot$3(ctx) { 3521 let music; 3522 let current; 3523 music = new Music({}); 3524 3525 return { 3526 c() { 3527 create_component$5(music.$$.fragment); 3528 }, 3529 m(target, anchor) { 3530 mount_component$5(music, target, anchor); 3531 current = true; 3532 }, 3533 i(local) { 3534 if (current) return; 3535 transition_in$5(music.$$.fragment, local); 3536 current = true; 3537 }, 3538 o(local) { 3539 transition_out$5(music.$$.fragment, local); 3540 current = false; 3541 }, 3542 d(detaching) { 3543 destroy_component$5(music, detaching); 3544 } 3545 }; 3546} 3547 3548function create_fragment$6(ctx) { 3549 let current_block_type_index; 3550 let if_block; 3551 let if_block_anchor; 3552 let current; 3553 const if_block_creators = [create_if_block$6, create_if_block_1$5, create_else_block$6]; 3554 const if_blocks = []; 3555 3556 function select_block_type(ctx, dirty) { 3557 if (/*value*/ ctx[1] === null) return 0; 3558 if (/*value*/ ctx[1].is_stream) return 1; 3559 return 2; 3560 } 3561 3562 current_block_type_index = select_block_type(ctx); 3563 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 3564 3565 return { 3566 c() { 3567 if_block.c(); 3568 if_block_anchor = empty$4(); 3569 }, 3570 m(target, anchor) { 3571 if_blocks[current_block_type_index].m(target, anchor); 3572 insert$6(target, if_block_anchor, anchor); 3573 current = true; 3574 }, 3575 p(ctx, [dirty]) { 3576 let previous_block_index = current_block_type_index; 3577 current_block_type_index = select_block_type(ctx); 3578 3579 if (current_block_type_index === previous_block_index) { 3580 if_blocks[current_block_type_index].p(ctx, dirty); 3581 } else { 3582 group_outros$4(); 3583 3584 transition_out$5(if_blocks[previous_block_index], 1, 1, () => { 3585 if_blocks[previous_block_index] = null; 3586 }); 3587 3588 check_outros$4(); 3589 if_block = if_blocks[current_block_type_index]; 3590 3591 if (!if_block) { 3592 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 3593 if_block.c(); 3594 } else { 3595 if_block.p(ctx, dirty); 3596 } 3597 3598 transition_in$5(if_block, 1); 3599 if_block.m(if_block_anchor.parentNode, if_block_anchor); 3600 } 3601 }, 3602 i(local) { 3603 if (current) return; 3604 transition_in$5(if_block); 3605 current = true; 3606 }, 3607 o(local) { 3608 transition_out$5(if_block); 3609 current = false;
3610 }, 3611 d(detaching) { 3612 if (detaching) { 3613 detach$6(if_block_anchor); 3614 } 3615 3616 if_blocks[current_block_type_index].d(detaching); 3617 } 3618 }; 3619} 3620 3621function instance$6($$self, $$props, $$invalidate) { 3622 let url; 3623 let { value = null } = $$props; 3624 let { label } = $$props; 3625 let { i18n } = $$props; 3626 let { dispatch_blob = () => Promise.resolve() } = $$props; 3627 let { interactive = false } = $$props; 3628 let { trim_region_settings = {} } = $$props; 3629 let { waveform_settings } = $$props; 3630 let { waveform_options } = $$props; 3631 let { mode = "" } = $$props; 3632 3633 let { handle_reset_value = () => { 3634 3635 } } = $$props; 3636 3637 let container; 3638 let waveform; 3639 let playing = false; 3640 let timeRef; 3641 let durationRef; 3642 let audioDuration; 3643 let trimDuration = 0; 3644 let show_volume_slider = false; 3645 const dispatch = createEventDispatcher$4(); 3646 3647 const formatTime = seconds => { 3648 const minutes = Math.floor(seconds / 60); 3649 const secondsRemainder = Math.round(seconds) % 60; 3650 const paddedSeconds = `0${secondsRemainder}`.slice(-2); 3651 return `${minutes}:${paddedSeconds}`; 3652 }; 3653 3654 const create_waveform = () => { 3655 $$invalidate(10, waveform = WaveSurfer.create({ 3656 container, 3657 url: value?.url, 3658 ...waveform_settings 3659 })); 3660 }; 3661 3662 const handle_trim_audio = async (start, end) => { 3663 $$invalidate(0, mode = ""); 3664 const decodedData = waveform?.getDecodedData(); 3665 3666 if (decodedData) await process_audio(decodedData, start, end).then(async trimmedBlob => { 3667 await dispatch_blob([trimmedBlob], "change"); 3668 waveform?.destroy(); 3669 create_waveform(); 3670 }); 3671 3672 dispatch("edit"); 3673 }; 3674 3675 async function load_audio(data) { 3676 await resolve_wasm_src(data).then(resolved_src => { 3677 if (!resolved_src || value?.is_stream) return; 3678 return waveform?.load(resolved_src); 3679 }); 3680 } 3681 3682 onMount$2(() => { 3683 window.addEventListener("keydown", e => { 3684 if (!waveform || show_volume_slider) return; 3685 3686 if (e.key === "ArrowRight" && mode !== "edit") { 3687 skipAudio(waveform, 0.1); 3688 } else if (e.key === "ArrowLeft" && mode !== "edit") { 3689 skipAudio(waveform, -0.1); 3690 } 3691 }); 3692 }); 3693 3694 function div0_binding($$value) { 3695 binding_callbacks$5[$$value ? 'unshift' : 'push'](() => { 3696 container = $$value; 3697 ($$invalidate(9, container), $$invalidate(10, waveform)); 3698 }); 3699 } 3700 3701 function time0_binding($$value) { 3702 binding_callbacks$5[$$value ? 'unshift' : 'push'](() => { 3703 timeRef = $$value; 3704 ($$invalidate(11, timeRef), $$invalidate(10, waveform)); 3705 }); 3706 } 3707 3708 function time1_binding($$value) { 3709 binding_callbacks$5[$$value ? 'unshift' : 'push'](() => { 3710 durationRef = $$value; 3711 ($$invalidate(12, durationRef), $$invalidate(10, waveform)); 3712 }); 3713 } 3714 3715 function waveformcontrols_mode_binding(value) { 3716 mode = value; 3717 $$invalidate(0, mode); 3718 } 3719 3720 function waveformcontrols_trimDuration_binding(value) { 3721 trimDuration = value; 3722 $$invalidate(15, trimDuration); 3723 } 3724 3725 function waveformcontrols_show_volume_slider_binding(value) { 3726 show_volume_slider = value; 3727 $$invalidate(16, show_volume_slider); 3728 } 3729 3730 $$self.$$set = $$props => {
3731 if ('value' in $$props) $$invalidate(1, value = $$props.value); 3732 if ('label' in $$props) $$invalidate(2, label = $$props.label); 3733 if ('i18n' in $$props) $$invalidate(3, i18n = $$props.i18n); 3734 if ('dispatch_blob' in $$props) $$invalidate(19, dispatch_blob = $$props.dispatch_blob); 3735 if ('interactive' in $$props) $$invalidate(4, interactive = $$props.interactive); 3736 if ('trim_region_settings' in $$props) $$invalidate(5, trim_region_settings = $$props.trim_region_settings); 3737 if ('waveform_settings' in $$props) $$invalidate(6, waveform_settings = $$props.waveform_settings); 3738 if ('waveform_options' in $$props) $$invalidate(7, waveform_options = $$props.waveform_options); 3739 if ('mode' in $$props) $$invalidate(0, mode = $$props.mode); 3740 if ('handle_reset_value' in $$props) $$invalidate(8, handle_reset_value = $$props.handle_reset_value); 3741 }; 3742 3743 $$self.$$.update = () => { 3744 if ($$self.$$.dirty & /*value*/ 2) { 3745 $$invalidate(20, url = value?.url); 3746 } 3747 3748 if ($$self.$$.dirty & /*container, waveform*/ 1536) { 3749 if (container !== undefined) { 3750 if (waveform !== undefined) waveform.destroy(); 3751 $$invalidate(9, container.innerHTML = "", container); 3752 create_waveform(); 3753 $$invalidate(13, playing = false); 3754 } 3755 } 3756 3757 if ($$self.$$.dirty & /*waveform, durationRef*/ 5120) { 3758 waveform?.on("decode", duration => { 3759 $$invalidate(14, audioDuration = duration); 3760 durationRef && $$invalidate(12, durationRef.textContent = formatTime(duration), durationRef); 3761 }); 3762 } 3763 3764 if ($$self.$$.dirty & /*waveform, timeRef*/ 3072) { 3765 waveform?.on("timeupdate", currentTime => timeRef && $$invalidate(11, timeRef.textContent = formatTime(currentTime), timeRef)); 3766 } 3767 3768 if ($$self.$$.dirty & /*waveform, waveform_settings*/ 1088) { 3769 waveform?.on("ready", () => { 3770 if (!waveform_settings.autoplay) { 3771 waveform?.stop(); 3772 } else { 3773 waveform?.play(); 3774 } 3775 }); 3776 } 3777 3778 if ($$self.$$.dirty & /*waveform*/ 1024) { 3779 waveform?.on("finish", () => { 3780 $$invalidate(13, playing = false); 3781 dispatch("stop"); 3782 }); 3783 } 3784 3785 if ($$self.$$.dirty & /*waveform*/ 1024) { 3786 waveform?.on("pause", () => { 3787 $$invalidate(13, playing = false); 3788 dispatch("pause"); 3789 }); 3790 } 3791 3792 if ($$self.$$.dirty & /*waveform*/ 1024) { 3793 waveform?.on("play", () => { 3794 $$invalidate(13, playing = true); 3795 dispatch("play"); 3796 }); 3797 } 3798 3799 if ($$self.$$.dirty & /*url*/ 1048576) { 3800 url && load_audio(url); 3801 } 3802 }; 3803 3804 return [ 3805 mode, 3806 value, 3807 label, 3808 i18n, 3809 interactive, 3810 trim_region_settings, 3811 waveform_settings, 3812 waveform_options, 3813 handle_reset_value, 3814 container, 3815 waveform, 3816 timeRef, 3817 durationRef, 3818 playing, 3819 audioDuration, 3820 trimDuration, 3821 show_volume_slider, 3822 formatTime, 3823 handle_trim_audio, 3824 dispatch_blob, 3825 url, 3826 div0_binding, 3827 time0_binding, 3828 time1_binding, 3829 waveformcontrols_mode_binding, 3830 waveformcontrols_trimDuration_binding, 3831 waveformcontrols_show_volume_slider_binding 3832 ]; 3833} 3834 3835class AudioPlayer extends SvelteComponent$6 { 3836 constructor(options) { 3837 super(); 3838 3839 init$6(this, options, instance$6, create_fragment$6, safe_not_equal$6, { 3840 value: 1, 3841 label: 2, 3842 i18n: 3, 3843 dispatch_blob: 19, 3844 interactive: 4, 3845 trim_region_settings: 5, 3846 waveform_settings: 6, 3847 waveform_options: 7, 3848 mode: 0, 3849 handle_reset_value: 8 3850 }); 3851 } 3852} 3853 3854const AudioPlayer$1 = AudioPlayer; 3855 3856const StaticAudio_svelte_svelte_type_style_lang = ''; 3857 3858/* home/runner/work/gradio/gradio/js/audio/static/StaticAudio.svelte generated by Svelte v4.2.2 */ 3859const { 3860 SvelteComponent: SvelteComponent$5, 3861 append: append$3, 3862 attr: attr$3, 3863 bubble: bubble$1, 3864 check_outros: check_outros$3, 3865 create_component: create_component$4, 3866 destroy_component: destroy_component$4, 3867 detach: detach$5, 3868 element: element$3, 3869 empty: empty$3, 3870 group_outros: group_outros$3, 3871 init: init$5, 3872 insert: insert$5, 3873 mount_component: mount_component$4, 3874 safe_not_equal: safe_not_equal$5, 3875 space: space$5, 3876 transition_in: transition_in$4, 3877 transition_out: transition_out$4 3878} = window.__gradio__svelte__internal;const { createEventDispatcher: createEventDispatcher$3 } = window.__gradio__svelte__internal; 3879function create_else_block$5(ctx) { 3880 let empty_1; 3881 let current; 3882 3883 empty_1 = new Empty({ 3884 props: { 3885 size: "small", 3886 $$slots: { default: [create_default_slot$2] }, 3887 $$scope: { ctx } 3888 } 3889 }); 3890 3891 return { 3892 c() { 3893 create_component$4(empty_1.$$.fragment); 3894 }, 3895 m(target, anchor) { 3896 mount_component$4(empty_1, target, anchor); 3897 current = true; 3898 }, 3899 p(ctx, dirty) { 3900 const empty_1_changes = {}; 3901
3902 if (dirty & /*$$scope*/ 32768) { 3903 empty_1_changes.$$scope = { dirty, ctx }; 3904 } 3905 3906 empty_1.$set(empty_1_changes); 3907 }, 3908 i(local) { 3909 if (current) return; 3910 transition_in$4(empty_1.$$.fragment, local); 3911 current = true; 3912 }, 3913 o(local) { 3914 transition_out$4(empty_1.$$.fragment, local); 3915 current = false; 3916 }, 3917 d(detaching) { 3918 destroy_component$4(empty_1, detaching); 3919 } 3920 }; 3921} 3922 3923// (26:0) {#if value !== null} 3924function create_if_block$5(ctx) { 3925 let div; 3926 let t0; 3927 let t1; 3928 let audioplayer; 3929 let current; 3930 let if_block0 = /*show_download_button*/ ctx[3] && create_if_block_2$2(ctx); 3931 let if_block1 = /*show_share_button*/ ctx[4] && create_if_block_1$4(ctx); 3932 3933 audioplayer = new AudioPlayer$1({ 3934 props: { 3935 value: /*value*/ ctx[0], 3936 label: /*label*/ ctx[1], 3937 i18n: /*i18n*/ ctx[5], 3938 waveform_settings: /*waveform_settings*/ ctx[6], 3939 waveform_options: /*waveform_options*/ ctx[7] 3940 } 3941 }); 3942 3943 audioplayer.$on("pause", /*pause_handler*/ ctx[11]); 3944 audioplayer.$on("play", /*play_handler*/ ctx[12]); 3945 audioplayer.$on("stop", /*stop_handler*/ ctx[13]); 3946 3947 return { 3948 c() { 3949 div = element$3("div"); 3950 if (if_block0) if_block0.c(); 3951 t0 = space$5(); 3952 if (if_block1) if_block1.c(); 3953 t1 = space$5(); 3954 create_component$4(audioplayer.$$.fragment); 3955 attr$3(div, "class", "icon-buttons svelte-rvdo70"); 3956 }, 3957 m(target, anchor) { 3958 insert$5(target, div, anchor); 3959 if (if_block0) if_block0.m(div, null); 3960 append$3(div, t0); 3961 if (if_block1) if_block1.m(div, null); 3962 insert$5(target, t1, anchor); 3963 mount_component$4(audioplayer, target, anchor); 3964 current = true; 3965 }, 3966 p(ctx, dirty) { 3967 if (/*show_download_button*/ ctx[3]) { 3968 if (if_block0) { 3969 if_block0.p(ctx, dirty); 3970 3971 if (dirty & /*show_download_button*/ 8) { 3972 transition_in$4(if_block0, 1); 3973 } 3974 } else { 3975 if_block0 = create_if_block_2$2(ctx); 3976 if_block0.c(); 3977 transition_in$4(if_block0, 1); 3978 if_block0.m(div, t0); 3979 } 3980 } else if (if_block0) { 3981 group_outros$3(); 3982 3983 transition_out$4(if_block0, 1, 1, () => { 3984 if_block0 = null; 3985 }); 3986 3987 check_outros$3(); 3988 } 3989 3990 if (/*show_share_button*/ ctx[4]) { 3991 if (if_block1) { 3992 if_block1.p(ctx, dirty); 3993 3994 if (dirty & /*show_share_button*/ 16) { 3995 transition_in$4(if_block1, 1); 3996 } 3997 } else { 3998 if_block1 = create_if_block_1$4(ctx); 3999 if_block1.c(); 4000 transition_in$4(if_block1, 1); 4001 if_block1.m(div, null); 4002 } 4003 } else if (if_block1) { 4004 group_outros$3(); 4005 4006 transition_out$4(if_block1, 1, 1, () => { 4007 if_block1 = null; 4008 }); 4009 4010 check_outros$3(); 4011 } 4012 4013 const audioplayer_changes = {}; 4014 if (dirty & /*value*/ 1) audioplayer_changes.value = /*value*/ ctx[0]; 4015 if (dirty & /*label*/ 2) audioplayer_changes.label = /*label*/ ctx[1]; 4016 if (dirty & /*i18n*/ 32) audioplayer_changes.i18n = /*i18n*/ ctx[5]; 4017 if (dirty & /*waveform_settings*/ 64) audioplayer_changes.waveform_settings = /*waveform_settings*/ ctx[6]; 4018 if (dirty & /*waveform_options*/ 128) audioplayer_changes.waveform_options = /*waveform_options*/ ctx[7]; 4019 audioplayer.$set(audioplayer_changes); 4020 }, 4021 i(local) { 4022 if (current) return; 4023 transition_in$4(if_block0); 4024 transition_in$4(if_block1); 4025 transition_in$4(audioplayer.$$.fragment, local); 4026 current = true; 4027 }, 4028 o(local) { 4029 transition_out$4(if_block0); 4030 transition_out$4(if_block1); 4031 transition_out$4(audioplayer.$$.fragment, local); 4032 current = false; 4033 }, 4034 d(detaching) { 4035 if (detaching) { 4036 detach$5(div); 4037 detach$5(t1); 4038 } 4039 4040 if (if_block0) if_block0.d(); 4041 if (if_block1) if_block1.d(); 4042 destroy_component$4(audioplayer, detaching); 4043 } 4044 }; 4045} 4046 4047// (63:1) <Empty size="small"> 4048function create_default_slot$2(ctx) { 4049 let music; 4050 let current; 4051 music = new Music({}); 4052 4053 return { 4054 c() { 4055 create_component$4(music.$$.fragment); 4056 }, 4057 m(target, anchor) { 4058 mount_component$4(music, target, anchor); 4059 current = true; 4060 }, 4061 i(local) { 4062 if (current) return; 4063 transition_in$4(music.$$.fragment, local); 4064 current = true; 4065 }, 4066 o(local) { 4067 transition_out$4(music.$$.fragment, local); 4068 current = false;
4069 }, 4070 d(detaching) { 4071 destroy_component$4(music, detaching); 4072 } 4073 }; 4074} 4075 4076// (28:2) {#if show_download_button} 4077function create_if_block_2$2(ctx) { 4078 let a; 4079 let iconbutton; 4080 let a_href_value; 4081 let a_download_value; 4082 let current; 4083 4084 iconbutton = new IconButton({ 4085 props: { 4086 Icon: Download, 4087 label: /*i18n*/ ctx[5]("common.download") 4088 } 4089 }); 4090 4091 return { 4092 c() { 4093 a = element$3("a"); 4094 create_component$4(iconbutton.$$.fragment); 4095 attr$3(a, "href", a_href_value = /*value*/ ctx[0].url); 4096 attr$3(a, "target", window.__is_colab__ ? "_blank" : null); 4097 attr$3(a, "download", a_download_value = /*value*/ ctx[0].orig_name || /*value*/ ctx[0].path); 4098 }, 4099 m(target, anchor) { 4100 insert$5(target, a, anchor); 4101 mount_component$4(iconbutton, a, null); 4102 current = true; 4103 }, 4104 p(ctx, dirty) { 4105 const iconbutton_changes = {}; 4106 if (dirty & /*i18n*/ 32) iconbutton_changes.label = /*i18n*/ ctx[5]("common.download"); 4107 iconbutton.$set(iconbutton_changes); 4108 4109 if (!current || dirty & /*value*/ 1 && a_href_value !== (a_href_value = /*value*/ ctx[0].url)) { 4110 attr$3(a, "href", a_href_value); 4111 } 4112 4113 if (!current || dirty & /*value*/ 1 && a_download_value !== (a_download_value = /*value*/ ctx[0].orig_name || /*value*/ ctx[0].path)) { 4114 attr$3(a, "download", a_download_value); 4115 } 4116 }, 4117 i(local) { 4118 if (current) return; 4119 transition_in$4(iconbutton.$$.fragment, local); 4120 current = true; 4121 }, 4122 o(local) { 4123 transition_out$4(iconbutton.$$.fragment, local); 4124 current = false; 4125 }, 4126 d(detaching) { 4127 if (detaching) { 4128 detach$5(a); 4129 } 4130 4131 destroy_component$4(iconbutton); 4132 } 4133 }; 4134} 4135 4136// (37:2) {#if show_share_button} 4137function create_if_block_1$4(ctx) { 4138 let sharebutton; 4139 let current; 4140 4141 sharebutton = new ShareButton({ 4142 props: { 4143 i18n: /*i18n*/ ctx[5], 4144 formatter: /*func*/ ctx[8], 4145 value: /*value*/ ctx[0] 4146 } 4147 }); 4148 4149 sharebutton.$on("error", /*error_handler*/ ctx[9]); 4150 sharebutton.$on("share", /*share_handler*/ ctx[10]); 4151 4152 return { 4153 c() { 4154 create_component$4(sharebutton.$$.fragment); 4155 }, 4156 m(target, anchor) { 4157 mount_component$4(sharebutton, target, anchor); 4158 current = true; 4159 }, 4160 p(ctx, dirty) { 4161 const sharebutton_changes = {}; 4162 if (dirty & /*i18n*/ 32) sharebutton_changes.i18n = /*i18n*/ ctx[5]; 4163 if (dirty & /*value*/ 1) sharebutton_changes.value = /*value*/ ctx[0]; 4164 sharebutton.$set(sharebutton_changes); 4165 }, 4166 i(local) { 4167 if (current) return; 4168 transition_in$4(sharebutton.$$.fragment, local); 4169 current = true; 4170 }, 4171 o(local) { 4172 transition_out$4(sharebutton.$$.fragment, local); 4173 current = false; 4174 }, 4175 d(detaching) { 4176 destroy_component$4(sharebutton, detaching); 4177 } 4178 }; 4179} 4180 4181function create_fragment$5(ctx) { 4182 let blocklabel; 4183 let t; 4184 let current_block_type_index; 4185 let if_block; 4186 let if_block_anchor; 4187 let current; 4188 4189 blocklabel = new BlockLabel({ 4190 props: { 4191 show_label: /*show_label*/ ctx[2], 4192 Icon: Music, 4193 float: false, 4194 label: /*label*/ ctx[1] || /*i18n*/ ctx[5]("audio.audio") 4195 } 4196 }); 4197 4198 const if_block_creators = [create_if_block$5, create_else_block$5]; 4199 const if_blocks = []; 4200 4201 function select_block_type(ctx, dirty) { 4202 if (/*value*/ ctx[0] !== null) return 0; 4203 return 1; 4204 } 4205 4206 current_block_type_index = select_block_type(ctx); 4207 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 4208 4209 return { 4210 c() { 4211 create_component$4(blocklabel.$$.fragment); 4212 t = space$5(); 4213 if_block.c(); 4214 if_block_anchor = empty$3(); 4215 }, 4216 m(target, anchor) { 4217 mount_component$4(blocklabel, target, anchor); 4218 insert$5(target, t, anchor); 4219 if_blocks[current_block_type_index].m(target, anchor); 4220 insert$5(target, if_block_anchor, anchor); 4221 current = true; 4222 }, 4223 p(ctx, [dirty]) { 4224 const blocklabel_changes = {}; 4225 if (dirty & /*show_label*/ 4) blocklabel_changes.show_label = /*show_label*/ ctx[2]; 4226 if (dirty & /*label, i18n*/ 34) blocklabel_changes.label = /*label*/ ctx[1] || /*i18n*/ ctx[5]("audio.audio"); 4227 blocklabel.$set(blocklabel_changes); 4228 let previous_block_index = current_block_type_index; 4229 current_block_type_index = select_block_type(ctx); 4230 4231 if (current_block_type_index === previous_block_index) { 4232 if_blocks[current_block_type_index].p(ctx, dirty); 4233 } else { 4234 group_outros$3(); 4235 4236 transition_out$4(if_blocks[previous_block_index], 1, 1, () => { 4237 if_blocks[previous_block_index] = null; 4238 }); 4239 4240 check_outros$3(); 4241 if_block = if_blocks[current_block_type_index]; 4242 4243 if (!if_block) { 4244 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 4245 if_block.c(); 4246 } else { 4247 if_block.p(ctx, dirty); 4248 } 4249 4250 transition_in$4(if_block, 1); 4251 if_block.m(if_block_anchor.parentNode, if_block_anchor); 4252 } 4253 }, 4254 i(local) { 4255 if (current) return; 4256 transition_in$4(blocklabel.$$.fragment, local); 4257 transition_in$4(if_block); 4258 current = true; 4259 }, 4260 o(local) { 4261 transition_out$4(blocklabel.$$.fragment, local); 4262 transition_out$4(if_block); 4263 current = false;
4264 }, 4265 d(detaching) { 4266 if (detaching) { 4267 detach$5(t); 4268 detach$5(if_block_anchor); 4269 } 4270 4271 destroy_component$4(blocklabel, detaching); 4272 if_blocks[current_block_type_index].d(detaching); 4273 } 4274 }; 4275} 4276 4277function instance$5($$self, $$props, $$invalidate) { 4278 let { value = null } = $$props; 4279 let { label } = $$props; 4280 let { show_label = true } = $$props; 4281 let { show_download_button = true } = $$props; 4282 let { show_share_button = false } = $$props; 4283 let { i18n } = $$props; 4284 let { waveform_settings } = $$props; 4285 let { waveform_options } = $$props; 4286 const dispatch = createEventDispatcher$3(); 4287 4288 const func = async value => { 4289 if (!value) return ""; 4290 let url = await uploadToHuggingFace(value.url, "url"); 4291 return `<audio controls src="${url}"></audio>`; 4292 }; 4293 4294 function error_handler(event) { 4295 bubble$1.call(this, $$self, event); 4296 } 4297 4298 function share_handler(event) { 4299 bubble$1.call(this, $$self, event); 4300 } 4301 4302 function pause_handler(event) { 4303 bubble$1.call(this, $$self, event); 4304 } 4305 4306 function play_handler(event) { 4307 bubble$1.call(this, $$self, event); 4308 } 4309 4310 function stop_handler(event) { 4311 bubble$1.call(this, $$self, event); 4312 } 4313 4314 $$self.$$set = $$props => {
4315 if ('value' in $$props) $$invalidate(0, value = $$props.value); 4316 if ('label' in $$props) $$invalidate(1, label = $$props.label); 4317 if ('show_label' in $$props) $$invalidate(2, show_label = $$props.show_label); 4318 if ('show_download_button' in $$props) $$invalidate(3, show_download_button = $$props.show_download_button); 4319 if ('show_share_button' in $$props) $$invalidate(4, show_share_button = $$props.show_share_button); 4320 if ('i18n' in $$props) $$invalidate(5, i18n = $$props.i18n); 4321 if ('waveform_settings' in $$props) $$invalidate(6, waveform_settings = $$props.waveform_settings); 4322 if ('waveform_options' in $$props) $$invalidate(7, waveform_options = $$props.waveform_options); 4323 }; 4324 4325 $$self.$$.update = () => { 4326 if ($$self.$$.dirty & /*value*/ 1) { 4327 value && dispatch("change", value); 4328 } 4329 }; 4330 4331 return [ 4332 value, 4333 label, 4334 show_label, 4335 show_download_button, 4336 show_share_button, 4337 i18n, 4338 waveform_settings, 4339 waveform_options, 4340 func, 4341 error_handler, 4342 share_handler, 4343 pause_handler, 4344 play_handler, 4345 stop_handler 4346 ]; 4347} 4348 4349class StaticAudio extends SvelteComponent$5 { 4350 constructor(options) { 4351 super(); 4352 4353 init$5(this, options, instance$5, create_fragment$5, safe_not_equal$5, { 4354 value: 0, 4355 label: 1, 4356 show_label: 2, 4357 show_download_button: 3, 4358 show_share_button: 4, 4359 i18n: 5, 4360 waveform_settings: 6, 4361 waveform_options: 7 4362 }); 4363 } 4364} 4365 4366const StaticAudio$1 = StaticAudio; 4367 4368function e(e,t,i,s){return new(i||(i=Promise))((function(r,n){function o(e){try{d(s.next(e));}catch(e){n(e);}}function a(e){try{d(s.throw(e));}catch(e){n(e);}}function d(e){var t;e.done?r(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t);}))).then(o,a);}d((s=s.apply(e,t||[])).next());}))}"function"==typeof SuppressedError&&SuppressedError;class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener;}addEventListener(e,t,i){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==i?void 0:i.once){const i=()=>{this.removeEventListener(e,i),this.removeEventListener(e,t);};return this.addEventListener(e,i),i}return ()=>this.removeEventListener(e,t)}removeEventListener(e,t){var i;null===(i=this.listeners[e])||void 0===i||i.delete(t);}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={};}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)));}}class i extends t{constructor(e){super(),this.subscriptions=[],this.options=e;}onInit(){}init(e){this.wavesurfer=e,this.onInit();}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()));}}const s=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class r extends i{constructor(e){var t;super(Object.assign(Object.assign({},e),{audioBitsPerSecond:null!==(t=e.audioBitsPerSecond)&&void 0!==t?t:128e3})),this.stream=null,this.mediaRecorder=null;}static create(e){return new r(e||{})}renderMicStream(e){const t=new AudioContext,i=t.createMediaStreamSource(e),s=t.createAnalyser();i.connect(s);const r=s.frequencyBinCount,n=new Float32Array(r),o=r/t.sampleRate;let a;const d=()=>{s.getFloatTimeDomainData(n),this.wavesurfer&&(this.wavesurfer.options.cursorWidth=0,this.wavesurfer.options.interact=!1,this.wavesurfer.load("",[n],o)),a=requestAnimationFrame(d);};return d(),()=>{cancelAnimationFrame(a),null==i||i.disconnect(),null==t||t.close();}}startMic(t){return e(this,void 0,void 0,(function*(){let e;try{e=yield navigator.mediaDevices.getUserMedia({audio:!(null==t?void 0:t.deviceId)||{deviceId:t.deviceId}});}catch(e){throw new Error("Error accessing the microphone: "+e.message)}const i=this.renderMicStream(e);return this.subscriptions.push(this.once("destroy",i)),this.stream=e,e}))}stopMic(){this.stream&&(this.stream.getTracks().forEach((e=>e.stop())),this.stream=null,this.mediaRecorder=null);}startRecording(t){return e(this,void 0,void 0,(function*(){const e=this.stream||(yield this.startMic(t)),i=this.mediaRecorder||new MediaRecorder(e,{mimeType:this.options.mimeType||s.find((e=>MediaRecorder.isTypeSupported(e))),audioBitsPerSecond:this.options.audioBitsPerSecond});this.mediaRecorder=i,this.stopRecording();const r=[];i.ondataavailable=e=>{e.data.size>0&&r.push(e.data);},i.onstop=()=>{var e;const t=new Blob(r,{type:i.mimeType});
4368this.emit("record-end",t),!1!==this.options.renderRecordedAudio&&(null===(e=this.wavesurfer)||void 0===e||e.load(URL.createObjectURL(t)));},i.start(),this.emit("record-start");}))}isRecording(){var e;return "recording"===(null===(e=this.mediaRecorder)||void 0===e?void 0:e.state)}isPaused(){var e;return "paused"===(null===(e=this.mediaRecorder)||void 0===e?void 0:e.state)}stopRecording(){var e;this.isRecording()&&(null===(e=this.mediaRecorder)||void 0===e||e.stop());}pauseRecording(){var e;this.isRecording()&&(null===(e=this.mediaRecorder)||void 0===e||e.pause(),this.emit("record-pause"));}resumeRecording(){var e;this.isPaused()&&(null===(e=this.mediaRecorder)||void 0===e||e.resume(),this.emit("record-resume"));}static getAvailableAudioDevices(){return e(this,void 0,void 0,(function*(){return navigator.mediaDevices.enumerateDevices().then((e=>e.filter((e=>"audioinput"===e.kind))))}))}destroy(){super.destroy(),this.stopRecording(),this.stopMic();}} 4369 4370const WaveformRecordControls_svelte_svelte_type_style_lang = ''; 4371 4372/* home/runner/work/gradio/gradio/js/audio/shared/WaveformRecordControls.svelte generated by Svelte v4.2.2 */ 4373const { 4374 SvelteComponent: SvelteComponent$4, 4375 append: append$2, 4376 attr: attr$2, 4377 binding_callbacks: binding_callbacks$4, 4378 create_component: create_component$3, 4379 destroy_component: destroy_component$3, 4380 destroy_each, 4381 detach: detach$4, 4382 element: element$2, 4383 empty: empty$2, 4384 ensure_array_like, 4385 init: init$4, 4386 insert: insert$4, 4387 listen: listen$1, 4388 mount_component: mount_component$3, 4389 run_all, 4390 safe_not_equal: safe_not_equal$4, 4391 set_data: set_data$2, 4392 set_input_value, 4393 space: space$4, 4394 text: text$2, 4395 transition_in: transition_in$3, 4396 transition_out: transition_out$3 4397} = window.__gradio__svelte__internal;const { createEventDispatcher: createEventDispatcher$2 } = window.__gradio__svelte__internal; 4398function get_each_context(ctx, list, i) { 4399 const child_ctx = ctx.slice(); 4400 child_ctx[22] = list[i]; 4401 return child_ctx; 4402} 4403 4404// (111:2) {#if timing && !show_recording_waveform} 4405function create_if_block_1$3(ctx) { 4406 let time; 4407 let t; 4408 4409 return { 4410 c() { 4411 time = element$2("time"); 4412 t = text$2(/*record_time*/ ctx[2]); 4413 attr$2(time, "class", "duration-button duration svelte-nq0yvd"); 4414 }, 4415 m(target, anchor) { 4416 insert$4(target, time, anchor); 4417 append$2(time, t); 4418 }, 4419 p(ctx, dirty) { 4420 if (dirty & /*record_time*/ 4) set_data$2(t, /*record_time*/ ctx[2]); 4421 }, 4422 d(detaching) { 4423 if (detaching) { 4424 detach$4(time); 4425 } 4426 } 4427 }; 4428} 4429 4430// (123:2) {:else} 4431function create_else_block$4(ctx) { 4432 let each_1_anchor; 4433 let each_value = ensure_array_like(/*micDevices*/ ctx[5]); 4434 let each_blocks = []; 4435 4436 for (let i = 0; i < each_value.length; i += 1) { 4437 each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); 4438 } 4439 4440 return { 4441 c() { 4442 for (let i = 0; i < each_blocks.length; i += 1) { 4443 each_blocks[i].c(); 4444 } 4445 4446 each_1_anchor = empty$2(); 4447 }, 4448 m(target, anchor) { 4449 for (let i = 0; i < each_blocks.length; i += 1) { 4450 if (each_blocks[i]) { 4451 each_blocks[i].m(target, anchor); 4452 } 4453 } 4454 4455 insert$4(target, each_1_anchor, anchor); 4456 }, 4457 p(ctx, dirty) { 4458 if (dirty & /*micDevices*/ 32) { 4459 each_value = ensure_array_like(/*micDevices*/ ctx[5]); 4460 let i; 4461 4462 for (i = 0; i < each_value.length; i += 1) { 4463 const child_ctx = get_each_context(ctx, each_value, i); 4464 4465 if (each_blocks[i]) { 4466 each_blocks[i].p(child_ctx, dirty); 4467 } else { 4468 each_blocks[i] = create_each_block(child_ctx); 4469 each_blocks[i].c(); 4470 each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor); 4471 } 4472 } 4473 4474 for (; i < each_blocks.length; i += 1) { 4475 each_blocks[i].d(1); 4476 } 4477 4478 each_blocks.length = each_value.length; 4479 } 4480 }, 4481 d(detaching) { 4482 if (detaching) { 4483 detach$4(each_1_anchor); 4484 } 4485 4486 destroy_each(each_blocks, detaching); 4487 } 4488 }; 4489} 4490 4491// (121:2) {#if micDevices.length === 0} 4492function create_if_block$4(ctx) { 4493 let option; 4494 let t_value = /*i18n*/ ctx[1]("audio.no_microphone") + ""; 4495 let t; 4496 4497 return { 4498 c() { 4499 option = element$2("option"); 4500 t = text$2(t_value); 4501 option.__value = ""; 4502 set_input_value(option, option.__value); 4503 }, 4504 m(target, anchor) { 4505 insert$4(target, option, anchor); 4506 append$2(option, t); 4507 }, 4508 p(ctx, dirty) {
4509 if (dirty & /*i18n*/ 2 && t_value !== (t_value = /*i18n*/ ctx[1]("audio.no_microphone") + "")) set_data$2(t, t_value); 4510 }, 4511 d(detaching) { 4512 if (detaching) { 4513 detach$4(option); 4514 } 4515 } 4516 }; 4517} 4518 4519// (124:3) {#each micDevices as micDevice} 4520function create_each_block(ctx) { 4521 let option; 4522 let t_value = /*micDevice*/ ctx[22].label + ""; 4523 let t; 4524 let option_value_value; 4525 4526 return { 4527 c() { 4528 option = element$2("option"); 4529 t = text$2(t_value); 4530 option.__value = option_value_value = /*micDevice*/ ctx[22].deviceId; 4531 set_input_value(option, option.__value); 4532 }, 4533 m(target, anchor) { 4534 insert$4(target, option, anchor); 4535 append$2(option, t); 4536 }, 4537 p(ctx, dirty) { 4538 if (dirty & /*micDevices*/ 32 && t_value !== (t_value = /*micDevice*/ ctx[22].label + "")) set_data$2(t, t_value); 4539 4540 if (dirty & /*micDevices*/ 32 && option_value_value !== (option_value_value = /*micDevice*/ ctx[22].deviceId)) { 4541 option.__value = option_value_value; 4542 set_input_value(option, option.__value); 4543 } 4544 }, 4545 d(detaching) { 4546 if (detaching) { 4547 detach$4(option); 4548 } 4549 } 4550 }; 4551} 4552 4553function create_fragment$4(ctx) { 4554 let div1; 4555 let div0; 4556 let button0; 4557 let t0_value = /*i18n*/ ctx[1]("audio.record") + ""; 4558 let t0; 4559 let t1; 4560 let button1; 4561 let t2_value = /*i18n*/ ctx[1]("audio.stop") + ""; 4562 let t2; 4563 let button1_class_value; 4564 let t3; 4565 let button2; 4566 let t4_value = /*i18n*/ ctx[1]("audio.stop") + ""; 4567 let t4; 4568 let t5; 4569 let button3; 4570 let pause; 4571 let t6; 4572 let button4; 4573 let t7_value = /*i18n*/ ctx[1]("audio.resume") + ""; 4574 let t7; 4575 let t8; 4576 let t9; 4577 let select; 4578 let select_disabled_value; 4579 let current; 4580 let mounted; 4581 let dispose; 4582 pause = new Pause({}); 4583 let if_block0 = /*timing*/ ctx[4] && !/*show_recording_waveform*/ ctx[3] && create_if_block_1$3(ctx); 4584 4585 function select_block_type(ctx, dirty) { 4586 if (/*micDevices*/ ctx[5].length === 0) return create_if_block$4; 4587 return create_else_block$4; 4588 } 4589 4590 let current_block_type = select_block_type(ctx); 4591 let if_block1 = current_block_type(ctx); 4592 4593 return { 4594 c() { 4595 div1 = element$2("div"); 4596 div0 = element$2("div"); 4597 button0 = element$2("button"); 4598 t0 = text$2(t0_value); 4599 t1 = space$4(); 4600 button1 = element$2("button"); 4601 t2 = text$2(t2_value); 4602 t3 = space$4(); 4603 button2 = element$2("button"); 4604 t4 = text$2(t4_value); 4605 t5 = space$4(); 4606 button3 = element$2("button"); 4607 create_component$3(pause.$$.fragment); 4608 t6 = space$4(); 4609 button4 = element$2("button"); 4610 t7 = text$2(t7_value); 4611 t8 = space$4(); 4612 if (if_block0) if_block0.c(); 4613 t9 = space$4(); 4614 select = element$2("select"); 4615 if_block1.c(); 4616 attr$2(button0, "class", "record record-button svelte-nq0yvd"); 4617 attr$2(button1, "class", button1_class_value = "stop-button " + (/*record*/ ctx[0].isPaused() ? 'stop-button-paused' : '') + " svelte-nq0yvd"); 4618 attr$2(button2, "id", "stop-paused"); 4619 attr$2(button2, "class", "stop-button-paused svelte-nq0yvd"); 4620 attr$2(button3, "class", "pause-button svelte-nq0yvd"); 4621 attr$2(button4, "class", "resume-button svelte-nq0yvd"); 4622 attr$2(div0, "class", "wrapper svelte-nq0yvd"); 4623 attr$2(select, "class", "mic-select svelte-nq0yvd"); 4624 attr$2(select, "aria-label", "Select input device"); 4625 select.disabled = select_disabled_value = /*micDevices*/ ctx[5].length === 0; 4626 attr$2(div1, "class", "controls svelte-nq0yvd"); 4627 }, 4628 m(target, anchor) { 4629 insert$4(target, div1, anchor); 4630 append$2(div1, div0); 4631 append$2(div0, button0); 4632 append$2(button0, t0); 4633 /*button0_binding*/ ctx[11](button0); 4634 append$2(div0, t1); 4635 append$2(div0, button1); 4636 append$2(button1, t2); 4637 /*button1_binding*/ ctx[13](button1); 4638 append$2(div0, t3); 4639 append$2(div0, button2); 4640 append$2(button2, t4); 4641 /*button2_binding*/ ctx[15](button2); 4642 append$2(div0, t5); 4643 append$2(div0, button3); 4644 mount_component$3(pause, button3, null); 4645 /*button3_binding*/ ctx[17](button3); 4646 append$2(div0, t6); 4647 append$2(div0, button4); 4648 append$2(button4, t7); 4649 /*button4_binding*/ ctx[19](button4); 4650 append$2(div0, t8); 4651 if (if_block0) if_block0.m(div0, null); 4652 append$2(div1, t9); 4653 append$2(div1, select); 4654 if_block1.m(select, null); 4655 current = true; 4656 4657 if (!mounted) { 4658 dispose = [ 4659 listen$1(button0, "click", /*click_handler*/ ctx[12]), 4660 listen$1(button1, "click", /*click_handler_1*/ ctx[14]), 4661 listen$1(button2, "click", /*click_handler_2*/ ctx[16]), 4662 listen$1(button3, "click", /*click_handler_3*/ ctx[18]), 4663 listen$1(button4, "click", /*click_handler_4*/ ctx[20]) 4664 ]; 4665 4666 mounted = true; 4667 } 4668 }, 4669 p(ctx, [dirty]) { 4670 if ((!current || dirty & /*i18n*/ 2) && t0_value !== (t0_value = /*i18n*/ ctx[1]("audio.record") + "")) set_data$2(t0, t0_value); 4671 if ((!current || dirty & /*i18n*/ 2) && t2_value !== (t2_value = /*i18n*/ ctx[1]("audio.stop") + "")) set_data$2(t2, t2_value); 4672 4673 if (!current || dirty & /*record*/ 1 && button1_class_value !== (button1_class_value = "stop-button " + (/*record*/ ctx[0].isPaused() ? 'stop-button-paused' : '') + " svelte-nq0yvd")) { 4674 attr$2(button1, "class", button1_class_value); 4675 } 4676 4677 if ((!current || dirty & /*i18n*/ 2) && t4_value !== (t4_value = /*i18n*/ ctx[1]("audio.stop") + "")) set_data$2(t4, t4_value); 4678 if ((!current || dirty & /*i18n*/ 2) && t7_value !== (t7_value = /*i18n*/ ctx[1]("audio.resume") + "")) set_data$2(t7, t7_value); 4679 4680 if (/*timing*/ ctx[4] && !/*show_recording_waveform*/ ctx[3]) { 4681 if (if_block0) { 4682 if_block0.p(ctx, dirty); 4683 } else { 4684 if_block0 = create_if_block_1$3(ctx); 4685 if_block0.c(); 4686 if_block0.m(div0, null); 4687 } 4688 } else if (if_block0) { 4689 if_block0.d(1); 4690 if_block0 = null; 4691 } 4692 4693 if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block1) { 4694 if_block1.p(ctx, dirty); 4695 } else { 4696 if_block1.d(1); 4697 if_block1 = current_block_type(ctx); 4698 4699 if (if_block1) { 4700 if_block1.c(); 4701 if_block1.m(select, null); 4702 } 4703 } 4704 4705 if (!current || dirty & /*micDevices*/ 32 && select_disabled_value !== (select_disabled_value = /*micDevices*/ ctx[5].length === 0)) { 4706 select.disabled = select_disabled_value; 4707 } 4708 }, 4709 i(local) { 4710 if (current) return; 4711 transition_in$3(pause.$$.fragment, local); 4712 current = true; 4713 }, 4714 o(local) { 4715 transition_out$3(pause.$$.fragment, local); 4716 current = false;
4717 }, 4718 d(detaching) { 4719 if (detaching) { 4720 detach$4(div1); 4721 } 4722 4723 /*button0_binding*/ ctx[11](null); 4724 /*button1_binding*/ ctx[13](null); 4725 /*button2_binding*/ ctx[15](null); 4726 destroy_component$3(pause); 4727 /*button3_binding*/ ctx[17](null); 4728 /*button4_binding*/ ctx[19](null); 4729 if (if_block0) if_block0.d(); 4730 if_block1.d(); 4731 mounted = false; 4732 run_all(dispose); 4733 } 4734 }; 4735} 4736 4737function instance$4($$self, $$props, $$invalidate) { 4738 let { record } = $$props; 4739 let { i18n } = $$props; 4740 let micDevices = []; 4741 let recordButton; 4742 let pauseButton; 4743 let resumeButton; 4744 let stopButton; 4745 let stopButtonPaused; 4746 let { record_time } = $$props; 4747 let { show_recording_waveform } = $$props; 4748 let { timing = false } = $$props; 4749 const dispatch = createEventDispatcher$2(); 4750 4751 function button0_binding($$value) { 4752 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4753 recordButton = $$value; 4754 ($$invalidate(6, recordButton), $$invalidate(0, record)); 4755 }); 4756 } 4757 4758 const click_handler = () => record.startRecording(); 4759 4760 function button1_binding($$value) { 4761 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4762 stopButton = $$value; 4763 ($$invalidate(9, stopButton), $$invalidate(0, record)); 4764 }); 4765 } 4766 4767 const click_handler_1 = () => { 4768 if (record.isPaused()) { 4769 record.resumeRecording(); 4770 record.stopRecording(); 4771 } 4772 4773 record.stopRecording(); 4774 }; 4775 4776 function button2_binding($$value) { 4777 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4778 stopButtonPaused = $$value; 4779 ($$invalidate(10, stopButtonPaused), $$invalidate(0, record)); 4780 }); 4781 } 4782 4783 const click_handler_2 = () => { 4784 if (record.isPaused()) { 4785 record.resumeRecording(); 4786 record.stopRecording(); 4787 } 4788 4789 record.stopRecording(); 4790 }; 4791 4792 function button3_binding($$value) { 4793 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4794 pauseButton = $$value; 4795 ($$invalidate(7, pauseButton), $$invalidate(0, record)); 4796 }); 4797 } 4798 4799 const click_handler_3 = () => record.pauseRecording(); 4800 4801 function button4_binding($$value) { 4802 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4803 resumeButton = $$value; 4804 ($$invalidate(8, resumeButton), $$invalidate(0, record)); 4805 }); 4806 } 4807 4808 const click_handler_4 = () => record.resumeRecording(); 4809 4810 $$self.$$set = $$props => {
4811 if ('record' in $$props) $$invalidate(0, record = $$props.record); 4812 if ('i18n' in $$props) $$invalidate(1, i18n = $$props.i18n); 4813 if ('record_time' in $$props) $$invalidate(2, record_time = $$props.record_time); 4814 if ('show_recording_waveform' in $$props) $$invalidate(3, show_recording_waveform = $$props.show_recording_waveform); 4815 if ('timing' in $$props) $$invalidate(4, timing = $$props.timing); 4816 }; 4817 4818 $$self.$$.update = () => { 4819 if ($$self.$$.dirty & /*i18n*/ 2) { 4820 try { 4821 let tempDevices = []; 4822 4823 r.getAvailableAudioDevices().then(devices => { 4824 $$invalidate(5, micDevices = devices); 4825 4826 devices.forEach(device => { 4827 if (device.deviceId) { 4828 tempDevices.push(device); 4829 } 4830 }); 4831 4832 $$invalidate(5, micDevices = tempDevices); 4833 }); 4834 } catch(err) { 4835 if (err instanceof DOMException && err.name == "NotAllowedError") { 4836 dispatch("error", i18n("audio.allow_recording_access")); 4837 } 4838 4839 throw err; 4840 } 4841 } 4842 4843 if ($$self.$$.dirty & /*record*/ 1) { 4844 record.on("record-start", () => { 4845 record.startMic(); 4846 $$invalidate(6, recordButton.style.display = "none", recordButton); 4847 $$invalidate(9, stopButton.style.display = "flex", stopButton); 4848 $$invalidate(7, pauseButton.style.display = "block", pauseButton); 4849 }); 4850 } 4851 4852 if ($$self.$$.dirty & /*record*/ 1) { 4853 record.on("record-end", () => { 4854 if (record.isPaused()) { 4855 record.resumeRecording(); 4856 record.stopRecording(); 4857 } 4858 4859 record.stopMic(); 4860 $$invalidate(6, recordButton.style.display = "flex", recordButton); 4861 $$invalidate(9, stopButton.style.display = "none", stopButton); 4862 $$invalidate(7, pauseButton.style.display = "none", pauseButton); 4863 $$invalidate(6, recordButton.disabled = false, recordButton); 4864 }); 4865 } 4866 4867 if ($$self.$$.dirty & /*record*/ 1) { 4868 record.on("record-pause", () => { 4869 $$invalidate(7, pauseButton.style.display = "none", pauseButton); 4870 $$invalidate(8, resumeButton.style.display = "block", resumeButton); 4871 $$invalidate(9, stopButton.style.display = "none", stopButton); 4872 $$invalidate(10, stopButtonPaused.style.display = "flex", stopButtonPaused); 4873 }); 4874 } 4875 4876 if ($$self.$$.dirty & /*record*/ 1) { 4877 record.on("record-resume", () => { 4878 $$invalidate(7, pauseButton.style.display = "block", pauseButton); 4879 $$invalidate(8, resumeButton.style.display = "none", resumeButton); 4880 $$invalidate(6, recordButton.style.display = "none", recordButton); 4881 $$invalidate(9, stopButton.style.display = "flex", stopButton); 4882 $$invalidate(10, stopButtonPaused.style.display = "none", stopButtonPaused); 4883 }); 4884 } 4885 }; 4886 4887 return [ 4888 record, 4889 i18n, 4890 record_time, 4891 show_recording_waveform, 4892 timing, 4893 micDevices, 4894 recordButton, 4895 pauseButton, 4896 resumeButton, 4897 stopButton, 4898 stopButtonPaused, 4899 button0_binding, 4900 click_handler, 4901 button1_binding, 4902 click_handler_1, 4903 button2_binding, 4904 click_handler_2, 4905 button3_binding, 4906 click_handler_3, 4907 button4_binding, 4908 click_handler_4 4909 ]; 4910} 4911 4912class WaveformRecordControls extends SvelteComponent$4 { 4913 constructor(options) { 4914 super(); 4915 4916 init$4(this, options, instance$4, create_fragment$4, safe_not_equal$4, { 4917 record: 0, 4918 i18n: 1, 4919 record_time: 2, 4920 show_recording_waveform: 3, 4921 timing: 4 4922 }); 4923 } 4924} 4925 4926const AudioRecorder_svelte_svelte_type_style_lang = ''; 4927 4928/* home/runner/work/gradio/gradio/js/audio/recorder/AudioRecorder.svelte generated by Svelte v4.2.2 */ 4929const { 4930 SvelteComponent: SvelteComponent$3, 4931 add_flush_callback: add_flush_callback$2, 4932 append: append$1, 4933 attr: attr$1, 4934 bind: bind$2, 4935 binding_callbacks: binding_callbacks$3, 4936 check_outros: check_outros$2, 4937 create_component: create_component$2, 4938 destroy_component: destroy_component$2, 4939 detach: detach$3, 4940 element: element$1, 4941 group_outros: group_outros$2, 4942 init: init$3, 4943 insert: insert$3, 4944 mount_component: mount_component$2, 4945 noop: noop$1, 4946 safe_not_equal: safe_not_equal$3, 4947 set_data: set_data$1, 4948 space: space$3, 4949 text: text$1, 4950 transition_in: transition_in$2, 4951 transition_out: transition_out$2 4952} = window.__gradio__svelte__internal; 4953const { onMount: onMount$1 } = window.__gradio__svelte__internal;const { createEventDispatcher: createEventDispatcher$1 } = window.__gradio__svelte__internal; 4954function create_if_block_2$1(ctx) { 4955 let div1; 4956 let time; 4957 let t1; 4958 let div0; 4959 let t2; 4960 let if_block0 = /*mode*/ ctx[0] === "edit" && /*trimDuration*/ ctx[15] > 0 && create_if_block_4(ctx); 4961 4962 function select_block_type(ctx, dirty) { 4963 if (/*timing*/ ctx[14]) return create_if_block_3$1; 4964 return create_else_block$3; 4965 } 4966 4967 let current_block_type = select_block_type(ctx); 4968 let if_block1 = current_block_type(ctx); 4969 4970 return { 4971 c() { 4972 div1 = element$1("div"); 4973 time = element$1("time"); 4974 time.textContent = "0:00"; 4975 t1 = space$3(); 4976 div0 = element$1("div"); 4977 if (if_block0) if_block0.c(); 4978 t2 = space$3(); 4979 if_block1.c(); 4980 attr$1(time, "class", "time svelte-7hmw24"); 4981 attr$1(div1, "class", "timestamps svelte-7hmw24"); 4982 }, 4983 m(target, anchor) { 4984 insert$3(target, div1, anchor); 4985 append$1(div1, time); 4986 /*time_binding*/ ctx[23](time); 4987 append$1(div1, t1); 4988 append$1(div1, div0); 4989 if (if_block0) if_block0.m(div0, null); 4990 append$1(div0, t2); 4991 if_block1.m(div0, null); 4992 }, 4993 p(ctx, dirty) { 4994 if (/*mode*/ ctx[0] === "edit" && /*trimDuration*/ ctx[15] > 0) { 4995 if (if_block0) { 4996 if_block0.p(ctx, dirty); 4997 } else { 4998 if_block0 = create_if_block_4(ctx); 4999 if_block0.c(); 5000 if_block0.m(div0, t2); 5001 } 5002 } else if (if_block0) { 5003 if_block0.d(1); 5004 if_block0 = null; 5005 } 5006 5007 if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block1) { 5008 if_block1.p(ctx, dirty); 5009 } else { 5010 if_block1.d(1); 5011 if_block1 = current_block_type(ctx); 5012 5013 if (if_block1) { 5014 if_block1.c(); 5015 if_block1.m(div0, null); 5016 } 5017 } 5018 }, 5019 d(detaching) { 5020 if (detaching) { 5021 detach$3(div1); 5022 } 5023 5024 /*time_binding*/ ctx[23](null); 5025 if (if_block0) if_block0.d(); 5026 if_block1.d(); 5027 } 5028 }; 5029} 5030 5031// (166:4) {#if mode === "edit" && trimDuration > 0} 5032function create_if_block_4(ctx) { 5033 let time; 5034 let t_value = /*format_time*/ ctx[16](/*trimDuration*/ ctx[15]) + ""; 5035 let t; 5036 5037 return { 5038 c() { 5039 time = element$1("time"); 5040 t = text$1(t_value); 5041 attr$1(time, "class", "trim-duration svelte-7hmw24"); 5042 }, 5043 m(target, anchor) {
5044 insert$3(target, time, anchor); 5045 append$1(time, t); 5046 }, 5047 p(ctx, dirty) { 5048 if (dirty[0] & /*trimDuration*/ 32768 && t_value !== (t_value = /*format_time*/ ctx[16](/*trimDuration*/ ctx[15]) + "")) set_data$1(t, t_value); 5049 }, 5050 d(detaching) { 5051 if (detaching) { 5052 detach$3(time); 5053 } 5054 } 5055 }; 5056} 5057 5058// (171:4) {:else} 5059function create_else_block$3(ctx) { 5060 let time; 5061 5062 return { 5063 c() { 5064 time = element$1("time"); 5065 time.textContent = "0:00"; 5066 attr$1(time, "class", "duration svelte-7hmw24"); 5067 }, 5068 m(target, anchor) { 5069 insert$3(target, time, anchor); 5070 /*time_binding_1*/ ctx[24](time); 5071 }, 5072 p: noop$1, 5073 d(detaching) { 5074 if (detaching) { 5075 detach$3(time); 5076 } 5077 5078 /*time_binding_1*/ ctx[24](null); 5079 } 5080 }; 5081} 5082 5083// (169:4) {#if timing} 5084function create_if_block_3$1(ctx) { 5085 let time; 5086 let t_value = /*format_time*/ ctx[16](/*seconds*/ ctx[13]) + ""; 5087 let t; 5088 5089 return { 5090 c() { 5091 time = element$1("time"); 5092 t = text$1(t_value); 5093 attr$1(time, "class", "duration svelte-7hmw24"); 5094 }, 5095 m(target, anchor) { 5096 insert$3(target, time, anchor); 5097 append$1(time, t); 5098 }, 5099 p(ctx, dirty) { 5100 if (dirty[0] & /*seconds*/ 8192 && t_value !== (t_value = /*format_time*/ ctx[16](/*seconds*/ ctx[13]) + "")) set_data$1(t, t_value); 5101 }, 5102 d(detaching) { 5103 if (detaching) { 5104 detach$3(time); 5105 } 5106 } 5107 }; 5108} 5109 5110// (178:1) {#if microphoneContainer && !recordedAudio} 5111function create_if_block_1$2(ctx) { 5112 let waveformrecordcontrols; 5113 let updating_record; 5114 let current; 5115 5116 function waveformrecordcontrols_record_binding(value) { 5117 /*waveformrecordcontrols_record_binding*/ ctx[25](value); 5118 } 5119 5120 let waveformrecordcontrols_props = { 5121 i18n: /*i18n*/ ctx[1], 5122 timing: /*timing*/ ctx[14], 5123 show_recording_waveform: /*waveform_options*/ ctx[2].show_recording_waveform, 5124 record_time: /*format_time*/ ctx[16](/*seconds*/ ctx[13]) 5125 }; 5126 5127 if (/*record*/ ctx[7] !== void 0) { 5128 waveformrecordcontrols_props.record = /*record*/ ctx[7]; 5129 } 5130 5131 waveformrecordcontrols = new WaveformRecordControls({ props: waveformrecordcontrols_props }); 5132 binding_callbacks$3.push(() => bind$2(waveformrecordcontrols, 'record', waveformrecordcontrols_record_binding)); 5133 5134 return { 5135 c() { 5136 create_component$2(waveformrecordcontrols.$$.fragment); 5137 }, 5138 m(target, anchor) { 5139 mount_component$2(waveformrecordcontrols, target, anchor); 5140 current = true; 5141 }, 5142 p(ctx, dirty) { 5143 const waveformrecordcontrols_changes = {}; 5144 if (dirty[0] & /*i18n*/ 2) waveformrecordcontrols_changes.i18n = /*i18n*/ ctx[1]; 5145 if (dirty[0] & /*timing*/ 16384) waveformrecordcontrols_changes.timing = /*timing*/ ctx[14]; 5146 if (dirty[0] & /*waveform_options*/ 4) waveformrecordcontrols_changes.show_recording_waveform = /*waveform_options*/ ctx[2].show_recording_waveform; 5147 if (dirty[0] & /*seconds*/ 8192) waveformrecordcontrols_changes.record_time = /*format_time*/ ctx[16](/*seconds*/ ctx[13]); 5148 5149 if (!updating_record && dirty[0] & /*record*/ 128) { 5150 updating_record = true; 5151 waveformrecordcontrols_changes.record = /*record*/ ctx[7]; 5152 add_flush_callback$2(() => updating_record = false); 5153 } 5154 5155 waveformrecordcontrols.$set(waveformrecordcontrols_changes); 5156 }, 5157 i(local) { 5158 if (current) return; 5159 transition_in$2(waveformrecordcontrols.$$.fragment, local); 5160 current = true; 5161 }, 5162 o(local) { 5163 transition_out$2(waveformrecordcontrols.$$.fragment, local); 5164 current = false; 5165 }, 5166 d(detaching) { 5167 destroy_component$2(waveformrecordcontrols, detaching); 5168 } 5169 }; 5170} 5171 5172// (188:1) {#if recordingWaveform && recordedAudio} 5173function create_if_block$3(ctx) { 5174 let waveformcontrols; 5175 let updating_waveform; 5176 let updating_trimDuration; 5177 let updating_mode; 5178 let current; 5179 5180 function waveformcontrols_waveform_binding(value) { 5181 /*waveformcontrols_waveform_binding*/ ctx[26](value); 5182 } 5183 5184 function waveformcontrols_trimDuration_binding(value) { 5185 /*waveformcontrols_trimDuration_binding*/ ctx[27](value); 5186 } 5187 5188 function waveformcontrols_mode_binding(value) { 5189 /*waveformcontrols_mode_binding*/ ctx[28](value); 5190 } 5191 5192 let waveformcontrols_props = { 5193 container: /*recordingContainer*/ ctx[5], 5194 playing: /*playing*/ ctx[11], 5195 audioDuration: /*audioDuration*/ ctx[12], 5196 i18n: /*i18n*/ ctx[1], 5197 interactive: true, 5198 handle_trim_audio: /*handle_trim_audio*/ ctx[17], 5199 showRedo: true, 5200 handle_reset_value: /*handle_reset_value*/ ctx[3], 5201 waveform_options: /*waveform_options*/ ctx[2] 5202 }; 5203 5204 if (/*recordingWaveform*/ ctx[4] !== void 0) { 5205 waveformcontrols_props.waveform = /*recordingWaveform*/ ctx[4]; 5206 } 5207 5208 if (/*trimDuration*/ ctx[15] !== void 0) { 5209 waveformcontrols_props.trimDuration = /*trimDuration*/ ctx[15]; 5210 } 5211 5212 if (/*mode*/ ctx[0] !== void 0) { 5213 waveformcontrols_props.mode = /*mode*/ ctx[0]; 5214 } 5215 5216 waveformcontrols = new WaveformControls({ props: waveformcontrols_props }); 5217 binding_callbacks$3.push(() => bind$2(waveformcontrols, 'waveform', waveformcontrols_waveform_binding)); 5218 binding_callbacks$3.push(() => bind$2(waveformcontrols, 'trimDuration', waveformcontrols_trimDuration_binding)); 5219 binding_callbacks$3.push(() => bind$2(waveformcontrols, 'mode', waveformcontrols_mode_binding)); 5220 5221 return { 5222 c() { 5223 create_component$2(waveformcontrols.$$.fragment); 5224 }, 5225 m(target, anchor) { 5226 mount_component$2(waveformcontrols, target, anchor); 5227 current = true; 5228 }, 5229 p(ctx, dirty) { 5230 const waveformcontrols_changes = {};
5231 if (dirty[0] & /*recordingContainer*/ 32) waveformcontrols_changes.container = /*recordingContainer*/ ctx[5]; 5232 if (dirty[0] & /*playing*/ 2048) waveformcontrols_changes.playing = /*playing*/ ctx[11]; 5233 if (dirty[0] & /*audioDuration*/ 4096) waveformcontrols_changes.audioDuration = /*audioDuration*/ ctx[12]; 5234 if (dirty[0] & /*i18n*/ 2) waveformcontrols_changes.i18n = /*i18n*/ ctx[1]; 5235 if (dirty[0] & /*handle_reset_value*/ 8) waveformcontrols_changes.handle_reset_value = /*handle_reset_value*/ ctx[3]; 5236 if (dirty[0] & /*waveform_options*/ 4) waveformcontrols_changes.waveform_options = /*waveform_options*/ ctx[2]; 5237 5238 if (!updating_waveform && dirty[0] & /*recordingWaveform*/ 16) { 5239 updating_waveform = true; 5240 waveformcontrols_changes.waveform = /*recordingWaveform*/ ctx[4]; 5241 add_flush_callback$2(() => updating_waveform = false); 5242 } 5243 5244 if (!updating_trimDuration && dirty[0] & /*trimDuration*/ 32768) { 5245 updating_trimDuration = true; 5246 waveformcontrols_changes.trimDuration = /*trimDuration*/ ctx[15]; 5247 add_flush_callback$2(() => updating_trimDuration = false); 5248 } 5249 5250 if (!updating_mode && dirty[0] & /*mode*/ 1) { 5251 updating_mode = true; 5252 waveformcontrols_changes.mode = /*mode*/ ctx[0]; 5253 add_flush_callback$2(() => updating_mode = false); 5254 } 5255 5256 waveformcontrols.$set(waveformcontrols_changes); 5257 }, 5258 i(local) { 5259 if (current) return; 5260 transition_in$2(waveformcontrols.$$.fragment, local); 5261 current = true; 5262 }, 5263 o(local) { 5264 transition_out$2(waveformcontrols.$$.fragment, local); 5265 current = false; 5266 }, 5267 d(detaching) { 5268 destroy_component$2(waveformcontrols, detaching); 5269 } 5270 }; 5271} 5272 5273function create_fragment$3(ctx) { 5274 let div2; 5275 let div0; 5276 let t0; 5277 let div1; 5278 let t1; 5279 let t2; 5280 let t3; 5281 let current; 5282 let if_block0 = (/*timing*/ ctx[14] || /*recordedAudio*/ ctx[8]) && /*waveform_options*/ ctx[2].show_recording_waveform && create_if_block_2$1(ctx); 5283 let if_block1 = /*microphoneContainer*/ ctx[6] && !/*recordedAudio*/ ctx[8] && create_if_block_1$2(ctx); 5284 let if_block2 = /*recordingWaveform*/ ctx[4] && /*recordedAudio*/ ctx[8] && create_if_block$3(ctx); 5285 5286 return { 5287 c() { 5288 div2 = element$1("div"); 5289 div0 = element$1("div"); 5290 t0 = space$3(); 5291 div1 = element$1("div"); 5292 t1 = space$3(); 5293 if (if_block0) if_block0.c(); 5294 t2 = space$3(); 5295 if (if_block1) if_block1.c(); 5296 t3 = space$3(); 5297 if (if_block2) if_block2.c(); 5298 attr$1(div0, "class", "microphone svelte-7hmw24"); 5299 attr$1(div0, "data-testid", "microphone-waveform"); 5300 attr$1(div1, "data-testid", "recording-waveform"); 5301 attr$1(div2, "class", "component-wrapper svelte-7hmw24"); 5302 }, 5303 m(target, anchor) { 5304 insert$3(target, div2, anchor); 5305 append$1(div2, div0); 5306 /*div0_binding*/ ctx[21](div0); 5307 append$1(div2, t0); 5308 append$1(div2, div1); 5309 /*div1_binding*/ ctx[22](div1); 5310 append$1(div2, t1); 5311 if (if_block0) if_block0.m(div2, null); 5312 append$1(div2, t2); 5313 if (if_block1) if_block1.m(div2, null); 5314 append$1(div2, t3); 5315 if (if_block2) if_block2.m(div2, null); 5316 current = true; 5317 }, 5318 p(ctx, dirty) { 5319 if ((/*timing*/ ctx[14] || /*recordedAudio*/ ctx[8]) && /*waveform_options*/ ctx[2].show_recording_waveform) { 5320 if (if_block0) { 5321 if_block0.p(ctx, dirty); 5322 } else { 5323 if_block0 = create_if_block_2$1(ctx); 5324 if_block0.c(); 5325 if_block0.m(div2, t2); 5326 } 5327 } else if (if_block0) { 5328 if_block0.d(1); 5329 if_block0 = null; 5330 } 5331 5332 if (/*microphoneContainer*/ ctx[6] && !/*recordedAudio*/ ctx[8]) { 5333 if (if_block1) { 5334 if_block1.p(ctx, dirty); 5335 5336 if (dirty[0] & /*microphoneContainer, recordedAudio*/ 320) { 5337 transition_in$2(if_block1, 1); 5338 } 5339 } else { 5340 if_block1 = create_if_block_1$2(ctx); 5341 if_block1.c(); 5342 transition_in$2(if_block1, 1); 5343 if_block1.m(div2, t3); 5344 } 5345 } else if (if_block1) { 5346 group_outros$2(); 5347 5348 transition_out$2(if_block1, 1, 1, () => { 5349 if_block1 = null; 5350 }); 5351 5352 check_outros$2(); 5353 } 5354 5355 if (/*recordingWaveform*/ ctx[4] && /*recordedAudio*/ ctx[8]) { 5356 if (if_block2) { 5357 if_block2.p(ctx, dirty); 5358 5359 if (dirty[0] & /*recordingWaveform, recordedAudio*/ 272) { 5360 transition_in$2(if_block2, 1); 5361 } 5362 } else { 5363 if_block2 = create_if_block$3(ctx); 5364 if_block2.c(); 5365 transition_in$2(if_block2, 1); 5366 if_block2.m(div2, null); 5367 } 5368 } else if (if_block2) { 5369 group_outros$2(); 5370 5371 transition_out$2(if_block2, 1, 1, () => { 5372 if_block2 = null; 5373 }); 5374 5375 check_outros$2(); 5376 } 5377 }, 5378 i(local) { 5379 if (current) return; 5380 transition_in$2(if_block1); 5381 transition_in$2(if_block2); 5382 current = true; 5383 }, 5384 o(local) { 5385 transition_out$2(if_block1); 5386 transition_out$2(if_block2); 5387 current = false;
5388 }, 5389 d(detaching) { 5390 if (detaching) { 5391 detach$3(div2); 5392 } 5393 5394 /*div0_binding*/ ctx[21](null); 5395 /*div1_binding*/ ctx[22](null); 5396 if (if_block0) if_block0.d(); 5397 if (if_block1) if_block1.d(); 5398 if (if_block2) if_block2.d(); 5399 } 5400 }; 5401} 5402 5403function instance$3($$self, $$props, $$invalidate) { 5404 let { mode } = $$props; 5405 let { i18n } = $$props; 5406 let { dispatch_blob } = $$props; 5407 let { waveform_settings } = $$props; 5408 let { waveform_options = { show_recording_waveform: true } } = $$props; 5409 let { handle_reset_value } = $$props; 5410 let micWaveform; 5411 let recordingWaveform; 5412 let playing = false; 5413 let recordingContainer; 5414 let microphoneContainer; 5415 let record; 5416 let recordedAudio = null; 5417 5418 // timestamps 5419 let timeRef; 5420 5421 let durationRef; 5422 let audioDuration; 5423 let seconds = 0; 5424 let interval; 5425 let timing = false; 5426 5427 // trimming 5428 let trimDuration = 0; 5429 5430 const start_interval = () => { 5431 clearInterval(interval); 5432 5433 $$invalidate(20, interval = setInterval( 5434 () => { 5435 $$invalidate(13, seconds++, seconds); 5436 }, 5437 1000 5438 )); 5439 }; 5440 5441 const dispatch = createEventDispatcher$1(); 5442 5443 const format_time = seconds => { 5444 const minutes = Math.floor(seconds / 60); 5445 const secondsRemainder = Math.round(seconds) % 60; 5446 const paddedSeconds = `0${secondsRemainder}`.slice(-2); 5447 return `${minutes}:${paddedSeconds}`; 5448 }; 5449 5450 const create_mic_waveform = () => { 5451 if (microphoneContainer) $$invalidate(6, microphoneContainer.innerHTML = "", microphoneContainer); 5452 if (micWaveform !== undefined) micWaveform.destroy(); 5453 if (!microphoneContainer) return; 5454 5455 micWaveform = WaveSurfer.create({ 5456 ...waveform_settings, 5457 normalize: false, 5458 container: microphoneContainer 5459 }); 5460 5461 $$invalidate(7, record = micWaveform.registerPlugin(r.create())); 5462 record.startMic(); 5463 }; 5464 5465 const create_recording_waveform = () => { 5466 let recording = recordingContainer; 5467 if (!recordedAudio || !recording) return; 5468 5469 $$invalidate(4, recordingWaveform = WaveSurfer.create({ 5470 container: recording, 5471 url: recordedAudio, 5472 ...waveform_settings 5473 })); 5474 }; 5475 5476 const handle_trim_audio = async (start, end) => { 5477 $$invalidate(0, mode = "edit"); 5478 const decodedData = recordingWaveform.getDecodedData(); 5479 5480 if (decodedData) await process_audio(decodedData, start, end).then(async trimmedAudio => { 5481 await dispatch_blob([trimmedAudio], "change"); 5482 await dispatch_blob([trimmedAudio], "stop_recording"); 5483 recordingWaveform.destroy(); 5484 create_recording_waveform(); 5485 }); 5486 5487 dispatch("edit"); 5488 }; 5489 5490 onMount$1(() => { 5491 create_mic_waveform(); 5492 5493 window.addEventListener("keydown", e => { 5494 if (e.key === "ArrowRight") { 5495 skipAudio(recordingWaveform, 0.1); 5496 } else if (e.key === "ArrowLeft") { 5497 skipAudio(recordingWaveform, -0.1); 5498 } 5499 }); 5500 }); 5501 5502 function div0_binding($$value) { 5503 binding_callbacks$3[$$value ? 'unshift' : 'push'](() => { 5504 microphoneContainer = $$value; 5505 $$invalidate(6, microphoneContainer); 5506 }); 5507 } 5508 5509 function div1_binding($$value) { 5510 binding_callbacks$3[$$value ? 'unshift' : 'push'](() => { 5511 recordingContainer = $$value; 5512 $$invalidate(5, recordingContainer); 5513 }); 5514 } 5515 5516 function time_binding($$value) { 5517 binding_callbacks$3[$$value ? 'unshift' : 'push'](() => { 5518 timeRef = $$value; 5519 ($$invalidate(9, timeRef), $$invalidate(4, recordingWaveform)); 5520 }); 5521 } 5522 5523 function time_binding_1($$value) { 5524 binding_callbacks$3[$$value ? 'unshift' : 'push'](() => { 5525 durationRef = $$value; 5526 ($$invalidate(10, durationRef), $$invalidate(4, recordingWaveform)); 5527 }); 5528 } 5529 5530 function waveformrecordcontrols_record_binding(value) { 5531 record = value; 5532 $$invalidate(7, record); 5533 } 5534 5535 function waveformcontrols_waveform_binding(value) { 5536 recordingWaveform = value; 5537 $$invalidate(4, recordingWaveform); 5538 } 5539 5540 function waveformcontrols_trimDuration_binding(value) { 5541 trimDuration = value; 5542 $$invalidate(15, trimDuration); 5543 } 5544 5545 function waveformcontrols_mode_binding(value) { 5546 mode = value; 5547 $$invalidate(0, mode); 5548 } 5549 5550 $$self.$$set = $$props => {
5551 if ('mode' in $$props) $$invalidate(0, mode = $$props.mode); 5552 if ('i18n' in $$props) $$invalidate(1, i18n = $$props.i18n); 5553 if ('dispatch_blob' in $$props) $$invalidate(18, dispatch_blob = $$props.dispatch_blob); 5554 if ('waveform_settings' in $$props) $$invalidate(19, waveform_settings = $$props.waveform_settings); 5555 if ('waveform_options' in $$props) $$invalidate(2, waveform_options = $$props.waveform_options); 5556 if ('handle_reset_value' in $$props) $$invalidate(3, handle_reset_value = $$props.handle_reset_value); 5557 }; 5558 5559 $$self.$$.update = () => { 5560 if ($$self.$$.dirty[0] & /*record, waveform_options, microphoneContainer*/ 196) { 5561 record?.on("record-start", () => { 5562 start_interval(); 5563 $$invalidate(14, timing = true); 5564 dispatch("start_recording"); 5565 5566 if (waveform_options.show_recording_waveform) { 5567 let waveformCanvas = microphoneContainer; 5568 if (waveformCanvas) waveformCanvas.style.display = "block"; 5569 } 5570 }); 5571 } 5572 5573 if ($$self.$$.dirty[0] & /*record, interval, dispatch_blob*/ 1310848) { 5574 record?.on("record-end", async blob => { 5575 $$invalidate(13, seconds = 0); 5576 $$invalidate(14, timing = false); 5577 clearInterval(interval); 5578 const array_buffer = await blob.arrayBuffer(); 5579 const context = new AudioContext(); 5580 const audio_buffer = await context.decodeAudioData(array_buffer); 5581 5582 if (audio_buffer) await process_audio(audio_buffer).then(async audio => { 5583 await dispatch_blob([audio], "change"); 5584 await dispatch_blob([audio], "stop_recording"); 5585 }); 5586 }); 5587 } 5588 5589 if ($$self.$$.dirty[0] & /*record, interval*/ 1048704) { 5590 record?.on("record-pause", () => { 5591 dispatch("pause_recording"); 5592 clearInterval(interval); 5593 }); 5594 } 5595 5596 if ($$self.$$.dirty[0] & /*record*/ 128) { 5597 record?.on("record-resume", () => { 5598 start_interval(); 5599 }); 5600 } 5601 5602 if ($$self.$$.dirty[0] & /*recordingWaveform, durationRef*/ 1040) { 5603 recordingWaveform?.on("decode", duration => { 5604 $$invalidate(12, audioDuration = duration); 5605 durationRef && $$invalidate(10, durationRef.textContent = format_time(duration), durationRef); 5606 }); 5607 } 5608 5609 if ($$self.$$.dirty[0] & /*recordingWaveform, timeRef*/ 528) { 5610 recordingWaveform?.on("timeupdate", currentTime => timeRef && $$invalidate(9, timeRef.textContent = format_time(currentTime), timeRef)); 5611 } 5612 5613 if ($$self.$$.dirty[0] & /*recordingWaveform*/ 16) { 5614 recordingWaveform?.on("pause", () => { 5615 dispatch("pause"); 5616 $$invalidate(11, playing = false); 5617 }); 5618 } 5619 5620 if ($$self.$$.dirty[0] & /*recordingWaveform*/ 16) { 5621 recordingWaveform?.on("play", () => { 5622 dispatch("play"); 5623 $$invalidate(11, playing = true); 5624 }); 5625 } 5626 5627 if ($$self.$$.dirty[0] & /*recordingWaveform*/ 16) { 5628 recordingWaveform?.on("finish", () => { 5629 dispatch("stop"); 5630 $$invalidate(11, playing = false); 5631 }); 5632 } 5633 5634 if ($$self.$$.dirty[0] & /*record, microphoneContainer, recordingContainer, recordedAudio*/ 480) { 5635 record?.on("record-end", blob => { 5636 $$invalidate(8, recordedAudio = URL.createObjectURL(blob)); 5637 const microphone = microphoneContainer; 5638 const recording = recordingContainer; 5639 if (microphone) microphone.style.display = "none"; 5640 5641 if (recording && recordedAudio) { 5642 recording.innerHTML = ""; 5643 create_recording_waveform(); 5644 } 5645 }); 5646 } 5647 }; 5648 5649 return [ 5650 mode, 5651 i18n, 5652 waveform_options, 5653 handle_reset_value, 5654 recordingWaveform, 5655 recordingContainer, 5656 microphoneContainer, 5657 record, 5658 recordedAudio, 5659 timeRef, 5660 durationRef, 5661 playing, 5662 audioDuration, 5663 seconds, 5664 timing, 5665 trimDuration, 5666 format_time, 5667 handle_trim_audio, 5668 dispatch_blob, 5669 waveform_settings, 5670 interval, 5671 div0_binding, 5672 div1_binding, 5673 time_binding, 5674 time_binding_1, 5675 waveformrecordcontrols_record_binding, 5676 waveformcontrols_waveform_binding, 5677 waveformcontrols_trimDuration_binding, 5678 waveformcontrols_mode_binding 5679 ]; 5680} 5681 5682class AudioRecorder extends SvelteComponent$3 { 5683 constructor(options) { 5684 super(); 5685 5686 init$3( 5687 this, 5688 options, 5689 instance$3, 5690 create_fragment$3, 5691 safe_not_equal$3, 5692 { 5693 mode: 0, 5694 i18n: 1, 5695 dispatch_blob: 18, 5696 waveform_settings: 19, 5697 waveform_options: 2, 5698 handle_reset_value: 3 5699 }, 5700 null,
5701 [-1, -1] 5702 ); 5703 } 5704} 5705 5706const StreamAudio_svelte_svelte_type_style_lang = ''; 5707 5708/* home/runner/work/gradio/gradio/js/audio/streaming/StreamAudio.svelte generated by Svelte v4.2.2 */ 5709const { 5710 SvelteComponent: SvelteComponent$2, 5711 append, 5712 attr, 5713 binding_callbacks: binding_callbacks$2, 5714 detach: detach$2, 5715 element, 5716 init: init$2, 5717 insert: insert$2, 5718 listen, 5719 noop, 5720 null_to_empty, 5721 safe_not_equal: safe_not_equal$2, 5722 set_data, 5723 set_style, 5724 space: space$2, 5725 text 5726} = window.__gradio__svelte__internal; 5727const { onMount } = window.__gradio__svelte__internal; 5728function create_if_block_1$1(ctx) { 5729 let div; 5730 5731 return { 5732 c() { 5733 div = element("div"); 5734 set_style(div, "display", /*recording*/ ctx[0] ? "block" : "none"); 5735 }, 5736 m(target, anchor) { 5737 insert$2(target, div, anchor); 5738 /*div_binding*/ ctx[9](div); 5739 }, 5740 p(ctx, dirty) { 5741 if (dirty & /*recording*/ 1) { 5742 set_style(div, "display", /*recording*/ ctx[0] ? "block" : "none"); 5743 } 5744 }, 5745 d(detaching) { 5746 if (detaching) { 5747 detach$2(div); 5748 } 5749 5750 /*div_binding*/ ctx[9](null); 5751 } 5752 }; 5753} 5754 5755// (54:1) {:else} 5756function create_else_block$2(ctx) { 5757 let button; 5758 let span1; 5759 let t0; 5760 let t1_value = /*i18n*/ ctx[4]("audio.record") + ""; 5761 let t1; 5762 let mounted; 5763 let dispose; 5764 5765 return { 5766 c() { 5767 button = element("button"); 5768 span1 = element("span"); 5769 span1.innerHTML = `<span class="dot"></span>`; 5770 t0 = space$2(); 5771 t1 = text(t1_value); 5772 attr(span1, "class", "record-icon"); 5773 attr(button, "class", "record-button svelte-1buz174"); 5774 }, 5775 m(target, anchor) { 5776 insert$2(target, button, anchor); 5777 append(button, span1); 5778 append(button, t0); 5779 append(button, t1); 5780 5781 if (!mounted) { 5782 dispose = listen(button, "click", /*click_handler_1*/ ctx[11]); 5783 mounted = true; 5784 } 5785 }, 5786 p(ctx, dirty) { 5787 if (dirty & /*i18n*/ 16 && t1_value !== (t1_value = /*i18n*/ ctx[4]("audio.record") + "")) set_data(t1, t1_value); 5788 }, 5789 d(detaching) { 5790 if (detaching) { 5791 detach$2(button); 5792 } 5793 5794 mounted = false; 5795 dispose(); 5796 } 5797 }; 5798} 5799 5800// (40:1) {#if recording} 5801function create_if_block$2(ctx) { 5802 let button; 5803 let span2; 5804 let t1; 5805 5806 let t2_value = (/*paused_recording*/ ctx[1] 5807 ? /*i18n*/ ctx[4]("audio.pause") 5808 : /*i18n*/ ctx[4]("audio.stop")) + ""; 5809 5810 let t2; 5811 let button_class_value; 5812 let mounted; 5813 let dispose; 5814 5815 return { 5816 c() { 5817 button = element("button"); 5818 span2 = element("span"); 5819 span2.innerHTML = `<span class="pinger"></span> <span class="dot"></span>`; 5820 t1 = space$2(); 5821 t2 = text(t2_value); 5822 attr(span2, "class", "record-icon"); 5823 5824 attr(button, "class", button_class_value = "" + (null_to_empty(/*paused_recording*/ ctx[1] 5825 ? "stop-button-paused" 5826 : "stop-button") + " svelte-1buz174")); 5827 }, 5828 m(target, anchor) { 5829 insert$2(target, button, anchor); 5830 append(button, span2); 5831 append(button, t1); 5832 append(button, t2); 5833 5834 if (!mounted) { 5835 dispose = listen(button, "click", /*click_handler*/ ctx[10]); 5836 mounted = true; 5837 } 5838 }, 5839 p(ctx, dirty) { 5840 if (dirty & /*paused_recording, i18n*/ 18 && t2_value !== (t2_value = (/*paused_recording*/ ctx[1] 5841 ? /*i18n*/ ctx[4]("audio.pause") 5842 : /*i18n*/ ctx[4]("audio.stop")) + "")) set_data(t2, t2_value); 5843 5844 if (dirty & /*paused_recording*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*paused_recording*/ ctx[1] 5845 ? "stop-button-paused" 5846 : "stop-button") + " svelte-1buz174"))) { 5847 attr(button, "class", button_class_value); 5848 } 5849 }, 5850 d(detaching) { 5851 if (detaching) { 5852 detach$2(button); 5853 } 5854 5855 mounted = false; 5856 dispose(); 5857 } 5858 }; 5859} 5860 5861function create_fragment$2(ctx) { 5862 let div; 5863 let t; 5864 let if_block0 = /*waveform_options*/ ctx[5].show_recording_waveform && create_if_block_1$1(ctx); 5865 5866 function select_block_type(ctx, dirty) { 5867 if (/*recording*/ ctx[0]) return create_if_block$2; 5868 return create_else_block$2; 5869 } 5870 5871 let current_block_type = select_block_type(ctx); 5872 let if_block1 = current_block_type(ctx); 5873 5874 return { 5875 c() { 5876 div = element("div"); 5877 if (if_block0) if_block0.c(); 5878 t = space$2(); 5879 if_block1.c(); 5880 attr(div, "class", "mic-wrap svelte-1buz174"); 5881 }, 5882 m(target, anchor) { 5883 insert$2(target, div, anchor); 5884 if (if_block0) if_block0.m(div, null); 5885 append(div, t); 5886 if_block1.m(div, null); 5887 }, 5888 p(ctx, [dirty]) { 5889 if (/*waveform_options*/ ctx[5].show_recording_waveform) { 5890 if (if_block0) { 5891 if_block0.p(ctx, dirty); 5892 } else { 5893 if_block0 = create_if_block_1$1(ctx); 5894 if_block0.c(); 5895 if_block0.m(div, t); 5896 } 5897 } else if (if_block0) { 5898 if_block0.d(1); 5899 if_block0 = null; 5900 } 5901 5902 if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block1) { 5903 if_block1.p(ctx, dirty); 5904 } else { 5905 if_block1.d(1); 5906 if_block1 = current_block_type(ctx); 5907 5908 if (if_block1) { 5909 if_block1.c(); 5910 if_block1.m(div, null); 5911 } 5912 } 5913 }, 5914 i: noop, 5915 o: noop, 5916 d(detaching) { 5917 if (detaching) { 5918 detach$2(div); 5919 } 5920 5921 if (if_block0) if_block0.d(); 5922 if_block1.d(); 5923 } 5924 }; 5925} 5926
5927function instance$2($$self, $$props, $$invalidate) { 5928 let { recording = false } = $$props; 5929 let { paused_recording = false } = $$props; 5930 let { stop } = $$props; 5931 let { record } = $$props; 5932 let { i18n } = $$props; 5933 let { waveform_settings } = $$props; 5934 let { waveform_options = { show_recording_waveform: true } } = $$props; 5935 let micWaveform; 5936 let waveformRecord; 5937 let microphoneContainer; 5938 5939 onMount(() => { 5940 create_mic_waveform(); 5941 }); 5942 5943 const create_mic_waveform = () => { 5944 if (micWaveform !== undefined) micWaveform.destroy(); 5945 if (!microphoneContainer) return; 5946 5947 micWaveform = WaveSurfer.create({ 5948 ...waveform_settings, 5949 height: 100, 5950 container: microphoneContainer 5951 }); 5952 5953 $$invalidate(6, waveformRecord = micWaveform.registerPlugin(r.create())); 5954 }; 5955 5956 function div_binding($$value) { 5957 binding_callbacks$2[$$value ? 'unshift' : 'push'](() => { 5958 microphoneContainer = $$value; 5959 $$invalidate(7, microphoneContainer); 5960 }); 5961 } 5962 5963 const click_handler = () => { 5964 waveformRecord?.stopMic(); 5965 stop(); 5966 }; 5967 5968 const click_handler_1 = () => { 5969 waveformRecord?.startMic(); 5970 record(); 5971 }; 5972 5973 $$self.$$set = $$props => {
5974 if ('recording' in $$props) $$invalidate(0, recording = $$props.recording); 5975 if ('paused_recording' in $$props) $$invalidate(1, paused_recording = $$props.paused_recording); 5976 if ('stop' in $$props) $$invalidate(2, stop = $$props.stop); 5977 if ('record' in $$props) $$invalidate(3, record = $$props.record); 5978 if ('i18n' in $$props) $$invalidate(4, i18n = $$props.i18n); 5979 if ('waveform_settings' in $$props) $$invalidate(8, waveform_settings = $$props.waveform_settings); 5980 if ('waveform_options' in $$props) $$invalidate(5, waveform_options = $$props.waveform_options); 5981 }; 5982 5983 return [ 5984 recording, 5985 paused_recording, 5986 stop, 5987 record, 5988 i18n, 5989 waveform_options, 5990 waveformRecord, 5991 microphoneContainer, 5992 waveform_settings, 5993 div_binding, 5994 click_handler, 5995 click_handler_1 5996 ]; 5997} 5998 5999class StreamAudio extends SvelteComponent$2 { 6000 constructor(options) { 6001 super(); 6002 6003 init$2(this, options, instance$2, create_fragment$2, safe_not_equal$2, { 6004 recording: 0, 6005 paused_recording: 1, 6006 stop: 2, 6007 record: 3, 6008 i18n: 4, 6009 waveform_settings: 8, 6010 waveform_options: 5 6011 }); 6012 } 6013} 6014 6015const { 6016 SvelteComponent: SvelteComponent$1, 6017 add_flush_callback: add_flush_callback$1, 6018 bind: bind$1, 6019 binding_callbacks: binding_callbacks$1, 6020 bubble, 6021 check_outros: check_outros$1, 6022 create_component: create_component$1, 6023 create_slot, 6024 destroy_component: destroy_component$1, 6025 detach: detach$1, 6026 empty: empty$1, 6027 get_all_dirty_from_scope, 6028 get_slot_changes, 6029 group_outros: group_outros$1, 6030 init: init$1, 6031 insert: insert$1, 6032 mount_component: mount_component$1, 6033 safe_not_equal: safe_not_equal$1, 6034 space: space$1, 6035 transition_in: transition_in$1, 6036 transition_out: transition_out$1, 6037 update_slot_base 6038} = window.__gradio__svelte__internal; 6039const { onDestroy, createEventDispatcher } = window.__gradio__svelte__internal; 6040function create_else_block_1(ctx) { 6041 let modifyupload; 6042 let t; 6043 let audioplayer; 6044 let updating_mode; 6045 let current; 6046 6047 modifyupload = new ModifyUpload({ 6048 props: { i18n: /*i18n*/ ctx[8], absolute: true } 6049 }); 6050 6051 modifyupload.$on("clear", /*clear*/ ctx[18]); 6052 modifyupload.$on("edit", /*edit_handler_1*/ ctx[29]); 6053 6054 function audioplayer_mode_binding(value) { 6055 /*audioplayer_mode_binding*/ ctx[30](value); 6056 } 6057 6058 let audioplayer_props = { 6059 value: /*value*/ ctx[1], 6060 label: /*label*/ ctx[3], 6061 i18n: /*i18n*/ ctx[8], 6062 dispatch_blob: /*dispatch_blob*/ ctx[16], 6063 waveform_settings: /*waveform_settings*/ ctx[9], 6064 waveform_options: /*waveform_options*/ ctx[11], 6065 trim_region_settings: /*trim_region_settings*/ ctx[10], 6066 handle_reset_value: /*handle_reset_value*/ ctx[12], 6067 interactive: true 6068 }; 6069 6070 if (/*mode*/ ctx[14] !== void 0) { 6071 audioplayer_props.mode = /*mode*/ ctx[14]; 6072 } 6073 6074 audioplayer = new AudioPlayer$1({ props: audioplayer_props }); 6075 binding_callbacks$1.push(() => bind$1(audioplayer, 'mode', audioplayer_mode_binding)); 6076 audioplayer.$on("stop", /*stop_handler*/ ctx[31]); 6077 audioplayer.$on("play", /*play_handler*/ ctx[32]); 6078 audioplayer.$on("pause", /*pause_handler*/ ctx[33]); 6079 audioplayer.$on("edit", /*edit_handler*/ ctx[34]); 6080 6081 return { 6082 c() { 6083 create_component$1(modifyupload.$$.fragment); 6084 t = space$1(); 6085 create_component$1(audioplayer.$$.fragment); 6086 }, 6087 m(target, anchor) { 6088 mount_component$1(modifyupload, target, anchor); 6089 insert$1(target, t, anchor); 6090 mount_component$1(audioplayer, target, anchor); 6091 current = true; 6092 }, 6093 p(ctx, dirty) { 6094 const modifyupload_changes = {}; 6095 if (dirty[0] & /*i18n*/ 256) modifyupload_changes.i18n = /*i18n*/ ctx[8]; 6096 modifyupload.$set(modifyupload_changes); 6097 const audioplayer_changes = {}; 6098 if (dirty[0] & /*value*/ 2) audioplayer_changes.value = /*value*/ ctx[1]; 6099 if (dirty[0] & /*label*/ 8) audioplayer_changes.label = /*label*/ ctx[3]; 6100 if (dirty[0] & /*i18n*/ 256) audioplayer_changes.i18n = /*i18n*/ ctx[8]; 6101 if (dirty[0] & /*waveform_settings*/ 512) audioplayer_changes.waveform_settings = /*waveform_settings*/ ctx[9]; 6102 if (dirty[0] & /*waveform_options*/ 2048) audioplayer_changes.waveform_options = /*waveform_options*/ ctx[11]; 6103 if (dirty[0] & /*trim_region_settings*/ 1024) audioplayer_changes.trim_region_settings = /*trim_region_settings*/ ctx[10];
6104 if (dirty[0] & /*handle_reset_value*/ 4096) audioplayer_changes.handle_reset_value = /*handle_reset_value*/ ctx[12]; 6105 6106 if (!updating_mode && dirty[0] & /*mode*/ 16384) { 6107 updating_mode = true; 6108 audioplayer_changes.mode = /*mode*/ ctx[14]; 6109 add_flush_callback$1(() => updating_mode = false); 6110 } 6111 6112 audioplayer.$set(audioplayer_changes); 6113 }, 6114 i(local) { 6115 if (current) return; 6116 transition_in$1(modifyupload.$$.fragment, local); 6117 transition_in$1(audioplayer.$$.fragment, local); 6118 current = true; 6119 }, 6120 o(local) { 6121 transition_out$1(modifyupload.$$.fragment, local); 6122 transition_out$1(audioplayer.$$.fragment, local); 6123 current = false; 6124 }, 6125 d(detaching) { 6126 if (detaching) { 6127 detach$1(t); 6128 } 6129 6130 destroy_component$1(modifyupload, detaching); 6131 destroy_component$1(audioplayer, detaching); 6132 } 6133 }; 6134} 6135 6136// (163:0) {#if value === null || streaming} 6137function create_if_block$1(ctx) { 6138 let current_block_type_index; 6139 let if_block; 6140 let if_block_anchor; 6141 let current; 6142 const if_block_creators = [create_if_block_1, create_if_block_3]; 6143 const if_blocks = []; 6144 6145 function select_block_type_1(ctx, dirty) { 6146 if (/*active_source*/ ctx[2] === "microphone") return 0; 6147 if (/*active_source*/ ctx[2] === "upload") return 1; 6148 return -1; 6149 } 6150 6151 if (~(current_block_type_index = select_block_type_1(ctx))) { 6152 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6153 } 6154 6155 return { 6156 c() { 6157 if (if_block) if_block.c(); 6158 if_block_anchor = empty$1(); 6159 }, 6160 m(target, anchor) { 6161 if (~current_block_type_index) { 6162 if_blocks[current_block_type_index].m(target, anchor); 6163 } 6164 6165 insert$1(target, if_block_anchor, anchor); 6166 current = true; 6167 }, 6168 p(ctx, dirty) { 6169 let previous_block_index = current_block_type_index; 6170 current_block_type_index = select_block_type_1(ctx); 6171 6172 if (current_block_type_index === previous_block_index) { 6173 if (~current_block_type_index) { 6174 if_blocks[current_block_type_index].p(ctx, dirty); 6175 } 6176 } else { 6177 if (if_block) { 6178 group_outros$1(); 6179 6180 transition_out$1(if_blocks[previous_block_index], 1, 1, () => { 6181 if_blocks[previous_block_index] = null; 6182 }); 6183 6184 check_outros$1(); 6185 } 6186 6187 if (~current_block_type_index) { 6188 if_block = if_blocks[current_block_type_index]; 6189 6190 if (!if_block) { 6191 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6192 if_block.c(); 6193 } else { 6194 if_block.p(ctx, dirty); 6195 } 6196 6197 transition_in$1(if_block, 1); 6198 if_block.m(if_block_anchor.parentNode, if_block_anchor); 6199 } else { 6200 if_block = null; 6201 } 6202 } 6203 }, 6204 i(local) { 6205 if (current) return; 6206 transition_in$1(if_block); 6207 current = true; 6208 }, 6209 o(local) { 6210 transition_out$1(if_block); 6211 current = false; 6212 }, 6213 d(detaching) { 6214 if (detaching) { 6215 detach$1(if_block_anchor); 6216 } 6217 6218 if (~current_block_type_index) { 6219 if_blocks[current_block_type_index].d(detaching); 6220 } 6221 } 6222 }; 6223} 6224 6225// (185:38) 6226function create_if_block_3(ctx) { 6227 let upload_1; 6228 let updating_dragging; 6229 let current; 6230 6231 function upload_1_dragging_binding(value) { 6232 /*upload_1_dragging_binding*/ ctx[27](value); 6233 } 6234 6235 let upload_1_props = { 6236 filetype: "audio/aac,audio/midi,audio/mpeg,audio/ogg,audio/wav,audio/x-wav,audio/opus,audio/webm,audio/flac,audio/vnd.rn-realaudio,audio/x-ms-wma,audio/x-aiff,audio/amr,audio/*", 6237 root: /*root*/ ctx[4], 6238 include_sources: /*sources*/ ctx[6].length > 1, 6239 $$slots: { default: [create_default_slot$1] }, 6240 $$scope: { ctx } 6241 }; 6242 6243 if (/*dragging*/ ctx[0] !== void 0) { 6244 upload_1_props.dragging = /*dragging*/ ctx[0]; 6245 } 6246 6247 upload_1 = new Upload({ props: upload_1_props }); 6248 binding_callbacks$1.push(() => bind$1(upload_1, 'dragging', upload_1_dragging_binding)); 6249 upload_1.$on("load", /*handle_load*/ ctx[19]); 6250 upload_1.$on("error", /*error_handler*/ ctx[28]); 6251 6252 return { 6253 c() { 6254 create_component$1(upload_1.$$.fragment); 6255 }, 6256 m(target, anchor) { 6257 mount_component$1(upload_1, target, anchor); 6258 current = true; 6259 }, 6260 p(ctx, dirty) { 6261 const upload_1_changes = {};
6262 if (dirty[0] & /*root*/ 16) upload_1_changes.root = /*root*/ ctx[4]; 6263 if (dirty[0] & /*sources*/ 64) upload_1_changes.include_sources = /*sources*/ ctx[6].length > 1; 6264 6265 if (dirty[1] & /*$$scope*/ 32) { 6266 upload_1_changes.$$scope = { dirty, ctx }; 6267 } 6268 6269 if (!updating_dragging && dirty[0] & /*dragging*/ 1) { 6270 updating_dragging = true; 6271 upload_1_changes.dragging = /*dragging*/ ctx[0]; 6272 add_flush_callback$1(() => updating_dragging = false); 6273 } 6274 6275 upload_1.$set(upload_1_changes); 6276 }, 6277 i(local) { 6278 if (current) return; 6279 transition_in$1(upload_1.$$.fragment, local); 6280 current = true; 6281 }, 6282 o(local) { 6283 transition_out$1(upload_1.$$.fragment, local); 6284 current = false; 6285 }, 6286 d(detaching) { 6287 destroy_component$1(upload_1, detaching); 6288 } 6289 }; 6290} 6291 6292// (164:1) {#if active_source === "microphone"} 6293function create_if_block_1(ctx) { 6294 let modifyupload; 6295 let t; 6296 let current_block_type_index; 6297 let if_block; 6298 let if_block_anchor; 6299 let current; 6300 6301 modifyupload = new ModifyUpload({ 6302 props: { i18n: /*i18n*/ ctx[8], absolute: true } 6303 }); 6304 6305 modifyupload.$on("clear", /*clear*/ ctx[18]); 6306 const if_block_creators = [create_if_block_2, create_else_block$1]; 6307 const if_blocks = []; 6308 6309 function select_block_type_2(ctx, dirty) { 6310 if (/*streaming*/ ctx[7]) return 0; 6311 return 1; 6312 } 6313 6314 current_block_type_index = select_block_type_2(ctx); 6315 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6316 6317 return { 6318 c() { 6319 create_component$1(modifyupload.$$.fragment); 6320 t = space$1(); 6321 if_block.c(); 6322 if_block_anchor = empty$1(); 6323 }, 6324 m(target, anchor) { 6325 mount_component$1(modifyupload, target, anchor); 6326 insert$1(target, t, anchor); 6327 if_blocks[current_block_type_index].m(target, anchor); 6328 insert$1(target, if_block_anchor, anchor); 6329 current = true; 6330 }, 6331 p(ctx, dirty) { 6332 const modifyupload_changes = {}; 6333 if (dirty[0] & /*i18n*/ 256) modifyupload_changes.i18n = /*i18n*/ ctx[8]; 6334 modifyupload.$set(modifyupload_changes); 6335 let previous_block_index = current_block_type_index; 6336 current_block_type_index = select_block_type_2(ctx); 6337 6338 if (current_block_type_index === previous_block_index) { 6339 if_blocks[current_block_type_index].p(ctx, dirty); 6340 } else { 6341 group_outros$1(); 6342 6343 transition_out$1(if_blocks[previous_block_index], 1, 1, () => { 6344 if_blocks[previous_block_index] = null; 6345 }); 6346 6347 check_outros$1(); 6348 if_block = if_blocks[current_block_type_index]; 6349 6350 if (!if_block) { 6351 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6352 if_block.c(); 6353 } else { 6354 if_block.p(ctx, dirty); 6355 } 6356 6357 transition_in$1(if_block, 1); 6358 if_block.m(if_block_anchor.parentNode, if_block_anchor); 6359 } 6360 }, 6361 i(local) { 6362 if (current) return; 6363 transition_in$1(modifyupload.$$.fragment, local); 6364 transition_in$1(if_block); 6365 current = true; 6366 }, 6367 o(local) { 6368 transition_out$1(modifyupload.$$.fragment, local); 6369 transition_out$1(if_block); 6370 current = false; 6371 }, 6372 d(detaching) { 6373 if (detaching) { 6374 detach$1(t); 6375 detach$1(if_block_anchor); 6376 } 6377 6378 destroy_component$1(modifyupload, detaching); 6379 if_blocks[current_block_type_index].d(detaching); 6380 } 6381 }; 6382} 6383 6384// (187:2) <Upload filetype="audio/aac,audio/midi,audio/mpeg,audio/ogg,audio/wav,audio/x-wav,audio/opus,audio/webm,audio/flac,audio/vnd.rn-realaudio,audio/x-ms-wma,audio/x-aiff,audio/amr,audio/*" on:load={handle_load} bind:dragging on:error={({ detail }) => dispatch("error", detail)} {root} include_sources={sources.length > 1} > 6385function create_default_slot$1(ctx) { 6386 let current; 6387 const default_slot_template = /*#slots*/ ctx[25].default; 6388 const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[36], null); 6389 6390 return { 6391 c() { 6392 if (default_slot) default_slot.c(); 6393 }, 6394 m(target, anchor) { 6395 if (default_slot) { 6396 default_slot.m(target, anchor); 6397 } 6398 6399 current = true; 6400 }, 6401 p(ctx, dirty) { 6402 if (default_slot) { 6403 if (default_slot.p && (!current || dirty[1] & /*$$scope*/ 32)) { 6404 update_slot_base( 6405 default_slot, 6406 default_slot_template, 6407 ctx, 6408 /*$$scope*/ ctx[36], 6409 !current 6410 ? get_all_dirty_from_scope(/*$$scope*/ ctx[36]) 6411 : get_slot_changes(default_slot_template, /*$$scope*/ ctx[36], dirty, null), 6412 null 6413 ); 6414 } 6415 } 6416 }, 6417 i(local) { 6418 if (current) return; 6419 transition_in$1(default_slot, local); 6420 current = true; 6421 }, 6422 o(local) { 6423 transition_out$1(default_slot, local); 6424 current = false;
6425 }, 6426 d(detaching) { 6427 if (default_slot) default_slot.d(detaching); 6428 } 6429 }; 6430} 6431 6432// (175:2) {:else} 6433function create_else_block$1(ctx) { 6434 let audiorecorder; 6435 let updating_mode; 6436 let current; 6437 6438 function audiorecorder_mode_binding(value) { 6439 /*audiorecorder_mode_binding*/ ctx[26](value); 6440 } 6441 6442 let audiorecorder_props = { 6443 i18n: /*i18n*/ ctx[8], 6444 dispatch_blob: /*dispatch_blob*/ ctx[16], 6445 waveform_settings: /*waveform_settings*/ ctx[9], 6446 waveform_options: /*waveform_options*/ ctx[11], 6447 handle_reset_value: /*handle_reset_value*/ ctx[12] 6448 }; 6449 6450 if (/*mode*/ ctx[14] !== void 0) { 6451 audiorecorder_props.mode = /*mode*/ ctx[14]; 6452 } 6453 6454 audiorecorder = new AudioRecorder({ props: audiorecorder_props }); 6455 binding_callbacks$1.push(() => bind$1(audiorecorder, 'mode', audiorecorder_mode_binding)); 6456 6457 return { 6458 c() { 6459 create_component$1(audiorecorder.$$.fragment); 6460 }, 6461 m(target, anchor) { 6462 mount_component$1(audiorecorder, target, anchor); 6463 current = true; 6464 }, 6465 p(ctx, dirty) { 6466 const audiorecorder_changes = {}; 6467 if (dirty[0] & /*i18n*/ 256) audiorecorder_changes.i18n = /*i18n*/ ctx[8]; 6468 if (dirty[0] & /*waveform_settings*/ 512) audiorecorder_changes.waveform_settings = /*waveform_settings*/ ctx[9]; 6469 if (dirty[0] & /*waveform_options*/ 2048) audiorecorder_changes.waveform_options = /*waveform_options*/ ctx[11]; 6470 if (dirty[0] & /*handle_reset_value*/ 4096) audiorecorder_changes.handle_reset_value = /*handle_reset_value*/ ctx[12]; 6471 6472 if (!updating_mode && dirty[0] & /*mode*/ 16384) { 6473 updating_mode = true; 6474 audiorecorder_changes.mode = /*mode*/ ctx[14]; 6475 add_flush_callback$1(() => updating_mode = false); 6476 } 6477 6478 audiorecorder.$set(audiorecorder_changes); 6479 }, 6480 i(local) { 6481 if (current) return; 6482 transition_in$1(audiorecorder.$$.fragment, local); 6483 current = true; 6484 }, 6485 o(local) { 6486 transition_out$1(audiorecorder.$$.fragment, local); 6487 current = false; 6488 }, 6489 d(detaching) { 6490 destroy_component$1(audiorecorder, detaching); 6491 } 6492 }; 6493} 6494 6495// (166:2) {#if streaming} 6496function create_if_block_2(ctx) { 6497 let streamaudio; 6498 let current; 6499 6500 streamaudio = new StreamAudio({ 6501 props: { 6502 record: /*record*/ ctx[17], 6503 recording: /*recording*/ ctx[13], 6504 stop: /*stop*/ ctx[20], 6505 i18n: /*i18n*/ ctx[8], 6506 waveform_settings: /*waveform_settings*/ ctx[9], 6507 waveform_options: /*waveform_options*/ ctx[11] 6508 } 6509 }); 6510 6511 return { 6512 c() { 6513 create_component$1(streamaudio.$$.fragment); 6514 }, 6515 m(target, anchor) { 6516 mount_component$1(streamaudio, target, anchor); 6517 current = true; 6518 }, 6519 p(ctx, dirty) { 6520 const streamaudio_changes = {}; 6521 if (dirty[0] & /*recording*/ 8192) streamaudio_changes.recording = /*recording*/ ctx[13]; 6522 if (dirty[0] & /*i18n*/ 256) streamaudio_changes.i18n = /*i18n*/ ctx[8]; 6523 if (dirty[0] & /*waveform_settings*/ 512) streamaudio_changes.waveform_settings = /*waveform_settings*/ ctx[9]; 6524 if (dirty[0] & /*waveform_options*/ 2048) streamaudio_changes.waveform_options = /*waveform_options*/ ctx[11]; 6525 streamaudio.$set(streamaudio_changes); 6526 }, 6527 i(local) { 6528 if (current) return; 6529 transition_in$1(streamaudio.$$.fragment, local); 6530 current = true; 6531 }, 6532 o(local) { 6533 transition_out$1(streamaudio.$$.fragment, local); 6534 current = false; 6535 }, 6536 d(detaching) { 6537 destroy_component$1(streamaudio, detaching); 6538 } 6539 }; 6540} 6541 6542function create_fragment$1(ctx) { 6543 let blocklabel; 6544 let t0; 6545 let current_block_type_index; 6546 let if_block; 6547 let t1; 6548 let selectsource; 6549 let updating_active_source; 6550 let current; 6551 6552 blocklabel = new BlockLabel({ 6553 props: { 6554 show_label: /*show_label*/ ctx[5], 6555 Icon: Music, 6556 float: /*active_source*/ ctx[2] === "upload" && /*value*/ ctx[1] === null, 6557 label: /*label*/ ctx[3] || /*i18n*/ ctx[8]("audio.audio") 6558 } 6559 }); 6560 6561 const if_block_creators = [create_if_block$1, create_else_block_1]; 6562 const if_blocks = []; 6563 6564 function select_block_type(ctx, dirty) { 6565 if (/*value*/ ctx[1] === null || /*streaming*/ ctx[7]) return 0; 6566 return 1; 6567 } 6568 6569 current_block_type_index = select_block_type(ctx); 6570 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6571 6572 function selectsource_active_source_binding(value) { 6573 /*selectsource_active_source_binding*/ ctx[35](value); 6574 } 6575 6576 let selectsource_props = { 6577 sources: /*sources*/ ctx[6], 6578 handle_clear: /*clear*/ ctx[18] 6579 }; 6580 6581 if (/*active_source*/ ctx[2] !== void 0) { 6582 selectsource_props.active_source = /*active_source*/ ctx[2]; 6583 } 6584 6585 selectsource = new SelectSource({ props: selectsource_props }); 6586 binding_callbacks$1.push(() => bind$1(selectsource, 'active_source', selectsource_active_source_binding)); 6587 6588 return { 6589 c() { 6590 create_component$1(blocklabel.$$.fragment); 6591 t0 = space$1(); 6592 if_block.c(); 6593 t1 = space$1(); 6594 create_component$1(selectsource.$$.fragment); 6595 }, 6596 m(target, anchor) { 6597 mount_component$1(blocklabel, target, anchor); 6598 insert$1(target, t0, anchor); 6599 if_blocks[current_block_type_index].m(target, anchor); 6600 insert$1(target, t1, anchor);
6601 mount_component$1(selectsource, target, anchor); 6602 current = true; 6603 }, 6604 p(ctx, dirty) { 6605 const blocklabel_changes = {}; 6606 if (dirty[0] & /*show_label*/ 32) blocklabel_changes.show_label = /*show_label*/ ctx[5]; 6607 if (dirty[0] & /*active_source, value*/ 6) blocklabel_changes.float = /*active_source*/ ctx[2] === "upload" && /*value*/ ctx[1] === null; 6608 if (dirty[0] & /*label, i18n*/ 264) blocklabel_changes.label = /*label*/ ctx[3] || /*i18n*/ ctx[8]("audio.audio"); 6609 blocklabel.$set(blocklabel_changes); 6610 let previous_block_index = current_block_type_index; 6611 current_block_type_index = select_block_type(ctx); 6612 6613 if (current_block_type_index === previous_block_index) { 6614 if_blocks[current_block_type_index].p(ctx, dirty); 6615 } else { 6616 group_outros$1(); 6617 6618 transition_out$1(if_blocks[previous_block_index], 1, 1, () => { 6619 if_blocks[previous_block_index] = null; 6620 }); 6621 6622 check_outros$1(); 6623 if_block = if_blocks[current_block_type_index]; 6624 6625 if (!if_block) { 6626 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6627 if_block.c(); 6628 } else { 6629 if_block.p(ctx, dirty); 6630 } 6631 6632 transition_in$1(if_block, 1); 6633 if_block.m(t1.parentNode, t1); 6634 } 6635 6636 const selectsource_changes = {}; 6637 if (dirty[0] & /*sources*/ 64) selectsource_changes.sources = /*sources*/ ctx[6]; 6638 6639 if (!updating_active_source && dirty[0] & /*active_source*/ 4) { 6640 updating_active_source = true; 6641 selectsource_changes.active_source = /*active_source*/ ctx[2]; 6642 add_flush_callback$1(() => updating_active_source = false); 6643 } 6644 6645 selectsource.$set(selectsource_changes); 6646 }, 6647 i(local) { 6648 if (current) return; 6649 transition_in$1(blocklabel.$$.fragment, local); 6650 transition_in$1(if_block); 6651 transition_in$1(selectsource.$$.fragment, local); 6652 current = true; 6653 }, 6654 o(local) { 6655 transition_out$1(blocklabel.$$.fragment, local); 6656 transition_out$1(if_block); 6657 transition_out$1(selectsource.$$.fragment, local); 6658 current = false; 6659 }, 6660 d(detaching) { 6661 if (detaching) { 6662 detach$1(t0); 6663 detach$1(t1); 6664 } 6665 6666 destroy_component$1(blocklabel, detaching); 6667 if_blocks[current_block_type_index].d(detaching); 6668 destroy_component$1(selectsource, detaching); 6669 } 6670 }; 6671} 6672 6673const STREAM_TIMESLICE = 500; 6674const NUM_HEADER_BYTES = 44; 6675 6676function instance$1($$self, $$props, $$invalidate) { 6677 let { $$slots: slots = {}, $$scope } = $$props; 6678 let { value = null } = $$props; 6679 let { label } = $$props; 6680 let { root } = $$props; 6681 let { show_label = true } = $$props; 6682 let { sources = ["microphone", "upload"] } = $$props; 6683 let { pending = false } = $$props; 6684 let { streaming = false } = $$props; 6685 let { i18n } = $$props; 6686 let { waveform_settings } = $$props; 6687 let { trim_region_settings = {} } = $$props; 6688 let { waveform_options = {} } = $$props; 6689 let { dragging } = $$props; 6690 let { active_source } = $$props; 6691 6692 let { handle_reset_value = () => { 6693 6694 } } = $$props; 6695 6696 // TODO: make use of this 6697 // export let type: "normal" | "numpy" = "normal"; 6698 let recording = false; 6699 6700 let recorder; 6701 let mode = ""; 6702 let header = undefined; 6703 let pending_stream = []; 6704 let submit_pending_stream_on_pending_end = false; 6705 let inited = false; 6706 let audio_chunks = []; 6707 let module_promises; 6708 6709 function get_modules() { 6710 module_promises = [ 6711 __vitePreload(() => import('./module-62ff9a50.js'),true?["./module-62ff9a50.js","./module-a4efca6e.js","./Index-1fd72dbe.js","./index-a4a7fd54.js","./index-5b29a666.css","./Index-235ebd01.css"]:void 0,import.meta.url), 6712 __vitePreload(() => import('./module-698c739c.js'),true?["./module-698c739c.js","./module-a4efca6e.js"]:void 0,import.meta.url) 6713 ]; 6714 } 6715 6716 if (streaming) { 6717 get_modules(); 6718 } 6719 6720 const dispatch = createEventDispatcher(); 6721 6722 const dispatch_blob = async (blobs, event) => { 6723 let _audio_blob = new File(blobs, "audio.wav"); 6724 const val = await prepare_files([_audio_blob], event === "stream"); 6725 $$invalidate(1, value = (await upload(val, root))?.filter(Boolean)[0]); 6726 dispatch(event, value); 6727 }; 6728 6729 onDestroy(() => { 6730 if (streaming && recorder && recorder.state !== "inactive") { 6731 recorder.stop(); 6732 } 6733 }); 6734 6735 async function prepare_audio() { 6736 let stream; 6737 6738 try { 6739 stream = await navigator.mediaDevices.getUserMedia({ audio: true }); 6740 } catch(err) { 6741 if (!navigator.mediaDevices) { 6742 dispatch("error", i18n("audio.no_device_support")); 6743 return; 6744 } 6745
6746 if (err instanceof DOMException && err.name == "NotAllowedError") { 6747 dispatch("error", i18n("audio.allow_recording_access")); 6748 return; 6749 } 6750 6751 throw err; 6752 } 6753 6754 if (stream == null) return; 6755 6756 if (streaming) { 6757 const [{ MediaRecorder, register }, { connect }] = await Promise.all(module_promises); 6758 await register(await connect()); 6759 recorder = new MediaRecorder(stream, { mimeType: "audio/wav" }); 6760 recorder.addEventListener("dataavailable", handle_chunk); 6761 } else { 6762 recorder = new MediaRecorder(stream); 6763 6764 recorder.addEventListener("dataavailable", event => { 6765 audio_chunks.push(event.data); 6766 }); 6767 6768 recorder.addEventListener("stop", async () => { 6769 $$invalidate(13, recording = false); 6770 await dispatch_blob(audio_chunks, "change"); 6771 await dispatch_blob(audio_chunks, "stop_recording"); 6772 audio_chunks = []; 6773 }); 6774 } 6775 6776 inited = true; 6777 } 6778 6779 async function handle_chunk(event) { 6780 let buffer = await event.data.arrayBuffer(); 6781 let payload = new Uint8Array(buffer); 6782 6783 if (!header) { 6784 $$invalidate(22, header = new Uint8Array(buffer.slice(0, NUM_HEADER_BYTES))); 6785 payload = new Uint8Array(buffer.slice(NUM_HEADER_BYTES)); 6786 } 6787 6788 if (pending) { 6789 pending_stream.push(payload); 6790 } else { 6791 let blobParts = [header].concat(pending_stream, [payload]); 6792 dispatch_blob(blobParts, "stream"); 6793 $$invalidate(23, pending_stream = []); 6794 } 6795 } 6796 6797 async function record() { 6798 $$invalidate(13, recording = true); 6799 dispatch("start_recording"); 6800 if (!inited) await prepare_audio(); 6801 $$invalidate(22, header = undefined); 6802 6803 if (streaming) { 6804 recorder.start(STREAM_TIMESLICE); 6805 } 6806 } 6807 6808 function clear() { 6809 dispatch("change", null); 6810 dispatch("clear"); 6811 $$invalidate(14, mode = ""); 6812 $$invalidate(1, value = null); 6813 } 6814 6815 function handle_load({ detail }) { 6816 $$invalidate(1, value = detail); 6817 dispatch("change", detail); 6818 dispatch("upload", detail); 6819 } 6820 6821 function stop() { 6822 $$invalidate(13, recording = false); 6823 6824 if (streaming) { 6825 dispatch("stop_recording"); 6826 recorder.stop(); 6827 6828 if (pending) { 6829 $$invalidate(24, submit_pending_stream_on_pending_end = true); 6830 } 6831 6832 dispatch_blob(audio_chunks, "stop_recording"); 6833 dispatch("clear"); 6834 $$invalidate(14, mode = ""); 6835 } 6836 } 6837 6838 function audiorecorder_mode_binding(value) { 6839 mode = value; 6840 $$invalidate(14, mode); 6841 } 6842 6843 function upload_1_dragging_binding(value) { 6844 dragging = value; 6845 $$invalidate(0, dragging); 6846 } 6847 6848 const error_handler = ({ detail }) => dispatch("error", detail); 6849 const edit_handler_1 = () =>
6849 $$invalidate(14, mode = "edit"); 6850 6851 function audioplayer_mode_binding(value) { 6852 mode = value; 6853 $$invalidate(14, mode); 6854 } 6855 6856 function stop_handler(event) { 6857 bubble.call(this, $$self, event); 6858 } 6859 6860 function play_handler(event) { 6861 bubble.call(this, $$self, event); 6862 } 6863 6864 function pause_handler(event) { 6865 bubble.call(this, $$self, event); 6866 } 6867 6868 function edit_handler(event) { 6869 bubble.call(this, $$self, event); 6870 } 6871 6872 function selectsource_active_source_binding(value) { 6873 active_source = value; 6874 $$invalidate(2, active_source); 6875 } 6876 6877 $$self.$$set = $$props => { 6878 if ('value' in $$props) $$invalidate(1, value = $$props.value); 6879 if ('label' in $$props) $$invalidate(3, label = $$props.label); 6880 if ('root' in $$props) $$invalidate(4, root = $$props.root); 6881 if ('show_label' in $$props) $$invalidate(5, show_label = $$props.show_label); 6882 if ('sources' in $$props) $$invalidate(6, sources = $$props.sources); 6883 if ('pending' in $$props) $$invalidate(21, pending = $$props.pending); 6884 if ('streaming' in $$props) $$invalidate(7, streaming = $$props.streaming);
6885 if ('i18n' in $$props) $$invalidate(8, i18n = $$props.i18n); 6886 if ('waveform_settings' in $$props) $$invalidate(9, waveform_settings = $$props.waveform_settings); 6887 if ('trim_region_settings' in $$props) $$invalidate(10, trim_region_settings = $$props.trim_region_settings); 6888 if ('waveform_options' in $$props) $$invalidate(11, waveform_options = $$props.waveform_options); 6889 if ('dragging' in $$props) $$invalidate(0, dragging = $$props.dragging); 6890 if ('active_source' in $$props) $$invalidate(2, active_source = $$props.active_source); 6891 if ('handle_reset_value' in $$props) $$invalidate(12, handle_reset_value = $$props.handle_reset_value); 6892 if ('$$scope' in $$props) $$invalidate(36, $$scope = $$props.$$scope); 6893 }; 6894 6895 $$self.$$.update = () => { 6896 if ($$self.$$.dirty[0] & /*dragging*/ 1) { 6897 dispatch("drag", dragging); 6898 } 6899 6900 if ($$self.$$.dirty[0] & /*submit_pending_stream_on_pending_end, pending, header, pending_stream*/ 31457280) { 6901 if (submit_pending_stream_on_pending_end && pending === false) { 6902 $$invalidate(24, submit_pending_stream_on_pending_end = false); 6903 6904 if (header && pending_stream) { 6905 let blobParts = [header].concat(pending_stream); 6906 $$invalidate(23, pending_stream = []); 6907 dispatch_blob(blobParts, "stream"); 6908 } 6909 } 6910 } 6911 }; 6912 6913 return [ 6914 dragging, 6915 value, 6916 active_source, 6917 label, 6918 root, 6919 show_label, 6920 sources, 6921 streaming, 6922 i18n, 6923 waveform_settings, 6924 trim_region_settings, 6925 waveform_options, 6926 handle_reset_value, 6927 recording, 6928 mode, 6929 dispatch, 6930 dispatch_blob, 6931 record, 6932 clear, 6933 handle_load, 6934 stop, 6935 pending, 6936 header, 6937 pending_stream, 6938 submit_pending_stream_on_pending_end, 6939 slots, 6940 audiorecorder_mode_binding, 6941 upload_1_dragging_binding, 6942 error_handler, 6943 edit_handler_1, 6944 audioplayer_mode_binding, 6945 stop_handler, 6946 play_handler, 6947 pause_handler, 6948 edit_handler, 6949 selectsource_active_source_binding, 6950 $$scope 6951 ]; 6952} 6953 6954class InteractiveAudio extends SvelteComponent$1 { 6955 constructor(options) { 6956 super(); 6957 6958 init$1( 6959 this, 6960 options, 6961 instance$1, 6962 create_fragment$1, 6963 safe_not_equal$1, 6964 { 6965 value: 1, 6966 label: 3, 6967 root: 4, 6968 show_label: 5, 6969 sources: 6, 6970 pending: 21, 6971 streaming: 7, 6972 i18n: 8, 6973 waveform_settings: 9, 6974 trim_region_settings: 10, 6975 waveform_options: 11, 6976 dragging: 0, 6977 active_source: 2, 6978 handle_reset_value: 12 6979 }, 6980 null, 6981 [-1, -1] 6982 ); 6983 } 6984} 6985 6986const InteractiveAudio$1 = InteractiveAudio; 6987 6988/* home/runner/work/gradio/gradio/js/audio/Index.svelte generated by Svelte v4.2.2 */ 6989const { 6990 SvelteComponent, 6991 add_flush_callback, 6992 assign, 6993 bind, 6994 binding_callbacks, 6995 check_outros, 6996 create_component, 6997 destroy_component, 6998 detach, 6999 empty, 7000 flush, 7001 get_spread_object, 7002 get_spread_update, 7003 group_outros, 7004 init, 7005 insert, 7006 mount_component, 7007 safe_not_equal, 7008 space, 7009 transition_in, 7010 transition_out 7011} = window.__gradio__svelte__internal; 7012function create_else_block(ctx) { 7013 let block; 7014 let current; 7015 7016 block = new Block({ 7017 props: { 7018 variant: /*value*/ ctx[0] === null && /*active_source*/ ctx[20] === "upload" 7019 ? "dashed" 7020 : "solid", 7021 border_mode: /*dragging*/ ctx[21] ? "focus" : "base", 7022 padding: false, 7023 elem_id: /*elem_id*/ ctx[2], 7024 elem_classes: /*elem_classes*/ ctx[3], 7025 visible: /*visible*/ ctx[4], 7026 container: /*container*/ ctx[10], 7027 scale: /*scale*/ ctx[11], 7028 min_width: /*min_width*/ ctx[12], 7029 $$slots: { default: [create_default_slot_1] }, 7030 $$scope: { ctx } 7031 } 7032 }); 7033 7034 return { 7035 c() { 7036 create_component(block.$$.fragment); 7037 }, 7038 m(target, anchor) { 7039 mount_component(block, target, anchor); 7040 current = true; 7041 }, 7042 p(ctx, dirty) { 7043 const block_changes = {}; 7044 7045 if (dirty[0] & /*value, active_source*/ 1048577) block_changes.variant = /*value*/ ctx[0] === null && /*active_source*/ ctx[20] === "upload" 7046 ? "dashed" 7047 : "solid"; 7048 7049 if (dirty[0] & /*dragging*/ 2097152) block_changes.border_mode = /*dragging*/ ctx[21] ? "focus" : "base"; 7050 if (dirty[0] & /*elem_id*/ 4) block_changes.elem_id = /*elem_id*/ ctx[2]; 7051 if (dirty[0] & /*elem_classes*/ 8) block_changes.elem_classes = /*elem_classes*/ ctx[3];
7052 if (dirty[0] & /*visible*/ 16) block_changes.visible = /*visible*/ ctx[4]; 7053 if (dirty[0] & /*container*/ 1024) block_changes.container = /*container*/ ctx[10]; 7054 if (dirty[0] & /*scale*/ 2048) block_changes.scale = /*scale*/ ctx[11]; 7055 if (dirty[0] & /*min_width*/ 4096) block_changes.min_width = /*min_width*/ ctx[12]; 7056 7057 if (dirty[0] & /*label, show_label, _value, root, sources, active_source, pending, streaming, gradio, waveform_settings, waveform_options, dragging, value, loading_status*/ 8356803 | dirty[1] & /*$$scope*/ 131072) { 7058 block_changes.$$scope = { dirty, ctx }; 7059 } 7060 7061 block.$set(block_changes); 7062 }, 7063 i(local) { 7064 if (current) return; 7065 transition_in(block.$$.fragment, local); 7066 current = true; 7067 }, 7068 o(local) { 7069 transition_out(block.$$.fragment, local); 7070 current = false; 7071 }, 7072 d(detaching) { 7073 destroy_component(block, detaching); 7074 } 7075 }; 7076} 7077 7078// (85:0) {#if !interactive} 7079function create_if_block(ctx) { 7080 let block; 7081 let current; 7082 7083 block = new Block({ 7084 props: { 7085 variant: "solid", 7086 border_mode: /*dragging*/ ctx[21] ? "focus" : "base", 7087 padding: false, 7088 elem_id: /*elem_id*/ ctx[2], 7089 elem_classes: /*elem_classes*/ ctx[3], 7090 visible: /*visible*/ ctx[4], 7091 container: /*container*/ ctx[10], 7092 scale: /*scale*/ ctx[11], 7093 min_width: /*min_width*/ ctx[12], 7094 $$slots: { default: [create_default_slot] }, 7095 $$scope: { ctx } 7096 } 7097 }); 7098 7099 return { 7100 c() { 7101 create_component(block.$$.fragment); 7102 }, 7103 m(target, anchor) { 7104 mount_component(block, target, anchor); 7105 current = true; 7106 }, 7107 p(ctx, dirty) { 7108 const block_changes = {}; 7109 if (dirty[0] & /*dragging*/ 2097152) block_changes.border_mode = /*dragging*/ ctx[21] ? "focus" : "base"; 7110 if (dirty[0] & /*elem_id*/ 4) block_changes.elem_id = /*elem_id*/ ctx[2]; 7111 if (dirty[0] & /*elem_classes*/ 8) block_changes.elem_classes = /*elem_classes*/ ctx[3]; 7112 if (dirty[0] & /*visible*/ 16) block_changes.visible = /*visible*/ ctx[4]; 7113 if (dirty[0] & /*container*/ 1024) block_changes.container = /*container*/ ctx[10]; 7114 if (dirty[0] & /*scale*/ 2048) block_changes.scale = /*scale*/ ctx[11]; 7115 if (dirty[0] & /*min_width*/ 4096) block_changes.min_width = /*min_width*/ ctx[12]; 7116 7117 if (dirty[0] & /*gradio, show_label, show_download_button, show_share_button, _value, label, waveform_settings, waveform_options, loading_status*/ 5038722 | dirty[1] & /*$$scope*/ 131072) { 7118 block_changes.$$scope = { dirty, ctx }; 7119 } 7120 7121 block.$set(block_changes); 7122 }, 7123 i(local) { 7124 if (current) return; 7125 transition_in(block.$$.fragment, local); 7126 current = true; 7127 }, 7128 o(local) { 7129 transition_out(block.$$.fragment, local); 7130 current = false; 7131 }, 7132 d(detaching) { 7133 destroy_component(block, detaching); 7134 } 7135 }; 7136} 7137 7138// (136:2) <InteractiveAudio {label} {show_label} value={_value} on:change={({ detail }) => (value = detail)} on:stream={({ detail }) => { value = detail; gradio.dispatch("stream", value); }} on:drag={({ detail }) => (dragging = detail)} {root} {sources} {active_source} {pending} {streaming} {handle_reset_value} bind:dragging on:edit={() => gradio.dispatch("edit")} on:play={() => gradio.dispatch("play")} on:pause={() => gradio.dispatch("pause")} on:stop={() => gradio.dispatch("stop")} on:start_recording={() => gradio.dispatch("start_recording")} on:pause_recording={() => gradio.dispatch("pause_recording")} on:stop_recording={(e) => gradio.dispatch("stop_recording", e.detail)} on:upload={() => gradio.dispatch("upload")} on:clear={() => gradio.dispatch("clear")} on:error={handle_error} i18n={gradio.i18n} {waveform_settings} {waveform_options} {trim_region_settings} > 7139function create_default_slot_2(ctx) { 7140 let uploadtext; 7141 let current; 7142 7143 uploadtext = new UploadText({ 7144 props: { 7145 i18n: /*gradio*/ ctx[18].i18n, 7146 type: "audio" 7147 } 7148 }); 7149 7150 return { 7151 c() { 7152 create_component(uploadtext.$$.fragment); 7153 }, 7154 m(target, anchor) { 7155 mount_component(uploadtext, target, anchor); 7156 current = true; 7157 }, 7158 p(ctx, dirty) { 7159 const uploadtext_changes = {};
7160 if (dirty[0] & /*gradio*/ 262144) uploadtext_changes.i18n = /*gradio*/ ctx[18].i18n; 7161 uploadtext.$set(uploadtext_changes); 7162 }, 7163 i(local) { 7164 if (current) return; 7165 transition_in(uploadtext.$$.fragment, local); 7166 current = true; 7167 }, 7168 o(local) { 7169 transition_out(uploadtext.$$.fragment, local); 7170 current = false; 7171 }, 7172 d(detaching) { 7173 destroy_component(uploadtext, detaching); 7174 } 7175 }; 7176} 7177 7178// (120:1) <Block variant={value === null && active_source === "upload" ? "dashed" : "solid"} border_mode={dragging ? "focus" : "base"} padding={false} {elem_id} {elem_classes} {visible} {container} {scale} {min_width} > 7179function create_default_slot_1(ctx) { 7180 let statustracker; 7181 let t; 7182 let interactiveaudio; 7183 let updating_dragging; 7184 let current; 7185 7186 const statustracker_spread_levels = [ 7187 { 7188 autoscroll: /*gradio*/ ctx[18].autoscroll 7189 }, 7190 { i18n: /*gradio*/ ctx[18].i18n }, 7191 /*loading_status*/ ctx[1] 7192 ]; 7193 7194 let statustracker_props = {}; 7195 7196 for (let i = 0; i < statustracker_spread_levels.length; i += 1) { 7197 statustracker_props = assign(statustracker_props, statustracker_spread_levels[i]); 7198 } 7199 7200 statustracker = new Static({ props: statustracker_props }); 7201 7202 function interactiveaudio_dragging_binding(value) { 7203 /*interactiveaudio_dragging_binding*/ ctx[35](value); 7204 } 7205 7206 let interactiveaudio_props = { 7207 label: /*label*/ ctx[7], 7208 show_label: /*show_label*/ ctx[9], 7209 value: /*_value*/ ctx[19], 7210 root: /*root*/ ctx[8], 7211 sources: /*sources*/ ctx[6], 7212 active_source: /*active_source*/ ctx[20], 7213 pending: /*pending*/ ctx[16], 7214 streaming: /*streaming*/ ctx[17], 7215 handle_reset_value: /*handle_reset_value*/ ctx[23], 7216 i18n: /*gradio*/ ctx[18].i18n, 7217 waveform_settings: /*waveform_settings*/ ctx[22], 7218 waveform_options: /*waveform_options*/ ctx[15], 7219 trim_region_settings: /*trim_region_settings*/ ctx[24], 7220 $$slots: { default: [create_default_slot_2] }, 7221 $$scope: { ctx } 7222 }; 7223 7224 if (/*dragging*/ ctx[21] !== void 0) { 7225 interactiveaudio_props.dragging = /*dragging*/ ctx[21]; 7226 } 7227 7228 interactiveaudio = new InteractiveAudio$1({ props: interactiveaudio_props }); 7229 binding_callbacks.push(() => bind(interactiveaudio, 'dragging', interactiveaudio_dragging_binding)); 7230 interactiveaudio.$on("change", /*change_handler*/ ctx[36]); 7231 interactiveaudio.$on("stream", /*stream_handler*/ ctx[37]); 7232 interactiveaudio.$on("drag", /*drag_handler*/ ctx[38]); 7233 interactiveaudio.$on("edit", /*edit_handler*/ ctx[39]); 7234 interactiveaudio.$on("play", /*play_handler_1*/ ctx[40]); 7235 interactiveaudio.$on("pause", /*pause_handler_1*/ ctx[41]); 7236 interactiveaudio.$on("stop", /*stop_handler_1*/ ctx[42]); 7237 interactiveaudio.$on("start_recording", /*start_recording_handler*/ ctx[43]); 7238 interactiveaudio.$on("pause_recording", /*pause_recording_handler*/ ctx[44]); 7239 interactiveaudio.$on("stop_recording", /*stop_recording_handler*/ ctx[45]); 7240 interactiveaudio.$on("upload", /*upload_handler*/ ctx[46]); 7241 interactiveaudio.$on("clear", /*clear_handler*/ ctx[47]); 7242 interactiveaudio.$on("error", /*handle_error*/ ctx[25]); 7243 7244 return { 7245 c() { 7246 create_component(statustracker.$$.fragment); 7247 t = space(); 7248 create_component(interactiveaudio.$$.fragment); 7249 }, 7250 m(target, anchor) { 7251 mount_component(statustracker, target, anchor); 7252 insert(target, t, anchor); 7253 mount_component(interactiveaudio, target, anchor); 7254 current = true; 7255 }, 7256 p(ctx, dirty) { 7257 const statustracker_changes = (dirty[0] & /*gradio, loading_status*/ 262146) 7258 ? get_spread_update(statustracker_spread_levels, [ 7259 dirty[0] & /*gradio*/ 262144 && { 7260 autoscroll: /*gradio*/ ctx[18].autoscroll 7261 }, 7262 dirty[0] & /*gradio*/ 262144 && { i18n: /*gradio*/ ctx[18].i18n }, 7263 dirty[0] & /*loading_status*/ 2 && get_spread_object(/*loading_status*/ ctx[1]) 7264 ]) 7265 : {}; 7266 7267 statustracker.$set(statustracker_changes); 7268 const interactiveaudio_changes = {}; 7269 if (dirty[0] & /*label*/ 128) interactiveaudio_changes.label = /*label*/ ctx[7]; 7270 if (dirty[0] & /*show_label*/ 512) interactiveaudio_changes.show_label = /*show_label*/ ctx[9]; 7271 if (dirty[0] & /*_value*/ 524288) interactiveaudio_changes.value = /*_value*/ ctx[19];
7272 if (dirty[0] & /*root*/ 256) interactiveaudio_changes.root = /*root*/ ctx[8]; 7273 if (dirty[0] & /*sources*/ 64) interactiveaudio_changes.sources = /*sources*/ ctx[6]; 7274 if (dirty[0] & /*active_source*/ 1048576) interactiveaudio_changes.active_source = /*active_source*/ ctx[20]; 7275 if (dirty[0] & /*pending*/ 65536) interactiveaudio_changes.pending = /*pending*/ ctx[16]; 7276 if (dirty[0] & /*streaming*/ 131072) interactiveaudio_changes.streaming = /*streaming*/ ctx[17]; 7277 if (dirty[0] & /*gradio*/ 262144) interactiveaudio_changes.i18n = /*gradio*/ ctx[18].i18n; 7278 if (dirty[0] & /*waveform_settings*/ 4194304) interactiveaudio_changes.waveform_settings = /*waveform_settings*/ ctx[22]; 7279 if (dirty[0] & /*waveform_options*/ 32768) interactiveaudio_changes.waveform_options = /*waveform_options*/ ctx[15]; 7280 7281 if (dirty[0] & /*gradio*/ 262144 | dirty[1] & /*$$scope*/ 131072) { 7282 interactiveaudio_changes.$$scope = { dirty, ctx }; 7283 } 7284 7285 if (!updating_dragging && dirty[0] & /*dragging*/ 2097152) { 7286 updating_dragging = true; 7287 interactiveaudio_changes.dragging = /*dragging*/ ctx[21]; 7288 add_flush_callback(() => updating_dragging = false); 7289 } 7290 7291 interactiveaudio.$set(interactiveaudio_changes); 7292 }, 7293 i(local) { 7294 if (current) return; 7295 transition_in(statustracker.$$.fragment, local); 7296 transition_in(interactiveaudio.$$.fragment, local); 7297 current = true; 7298 }, 7299 o(local) { 7300 transition_out(statustracker.$$.fragment, local); 7301 transition_out(interactiveaudio.$$.fragment, local); 7302 current = false; 7303 }, 7304 d(detaching) { 7305 if (detaching) { 7306 detach(t); 7307 } 7308 7309 destroy_component(statustracker, detaching); 7310 destroy_component(interactiveaudio, detaching); 7311 } 7312 }; 7313} 7314 7315// (86:1) <Block variant={"solid"} border_mode={dragging ? "focus" : "base"} padding={false} {elem_id} {elem_classes} {visible} {container} {scale} {min_width} > 7316function create_default_slot(ctx) { 7317 let statustracker; 7318 let t; 7319 let staticaudio; 7320 let current; 7321 7322 const statustracker_spread_levels = [ 7323 { 7324 autoscroll: /*gradio*/ ctx[18].autoscroll 7325 }, 7326 { i18n: /*gradio*/ ctx[18].i18n }, 7327 /*loading_status*/ ctx[1] 7328 ]; 7329 7330 let statustracker_props = {}; 7331 7332 for (let i = 0; i < statustracker_spread_levels.length; i += 1) { 7333 statustracker_props = assign(statustracker_props, statustracker_spread_levels[i]); 7334 } 7335 7336 statustracker = new Static({ props: statustracker_props }); 7337 7338 staticaudio = new StaticAudio$1({ 7339 props: { 7340 i18n: /*gradio*/ ctx[18].i18n, 7341 show_label: /*show_label*/ ctx[9], 7342 show_download_button: /*show_download_button*/ ctx[13], 7343 show_share_button: /*show_share_button*/ ctx[14], 7344 value: /*_value*/ ctx[19], 7345 label: /*label*/ ctx[7], 7346 waveform_settings: /*waveform_settings*/ ctx[22], 7347 waveform_options: /*waveform_options*/ ctx[15] 7348 } 7349 }); 7350 7351 staticaudio.$on("share", /*share_handler*/ ctx[30]); 7352 staticaudio.$on("error", /*error_handler*/ ctx[31]); 7353 staticaudio.$on("play", /*play_handler*/ ctx[32]); 7354 staticaudio.$on("pause", /*pause_handler*/ ctx[33]); 7355 staticaudio.$on("stop", /*stop_handler*/ ctx[34]); 7356 7357 return { 7358 c() { 7359 create_component(statustracker.$$.fragment); 7360 t = space(); 7361 create_component(staticaudio.$$.fragment); 7362 }, 7363 m(target, anchor) { 7364 mount_component(statustracker, target, anchor); 7365 insert(target, t, anchor); 7366 mount_component(staticaudio, target, anchor); 7367 current = true; 7368 }, 7369 p(ctx, dirty) { 7370 const statustracker_changes = (dirty[0] & /*gradio, loading_status*/ 262146) 7371 ? get_spread_update(statustracker_spread_levels, [ 7372 dirty[0] & /*gradio*/ 262144 && { 7373 autoscroll: /*gradio*/ ctx[18].autoscroll 7374 }, 7375 dirty[0] & /*gradio*/ 262144 && { i18n: /*gradio*/ ctx[18].i18n }, 7376 dirty[0] & /*loading_status*/ 2 && get_spread_object(/*loading_status*/ ctx[1]) 7377 ]) 7378 : {}; 7379 7380 statustracker.$set(statustracker_changes); 7381 const staticaudio_changes = {}; 7382 if (dirty[0] & /*gradio*/ 262144) staticaudio_changes.i18n = /*gradio*/ ctx[18].i18n; 7383 if (dirty[0] & /*show_label*/ 512) staticaudio_changes.show_label = /*show_label*/ ctx[9]; 7384 if (dirty[0] & /*show_download_button*/ 8192) staticaudio_changes.show_download_button = /*show_download_button*/ ctx[13];
7385 if (dirty[0] & /*show_share_button*/ 16384) staticaudio_changes.show_share_button = /*show_share_button*/ ctx[14]; 7386 if (dirty[0] & /*_value*/ 524288) staticaudio_changes.value = /*_value*/ ctx[19]; 7387 if (dirty[0] & /*label*/ 128) staticaudio_changes.label = /*label*/ ctx[7]; 7388 if (dirty[0] & /*waveform_settings*/ 4194304) staticaudio_changes.waveform_settings = /*waveform_settings*/ ctx[22]; 7389 if (dirty[0] & /*waveform_options*/ 32768) staticaudio_changes.waveform_options = /*waveform_options*/ ctx[15]; 7390 staticaudio.$set(staticaudio_changes); 7391 }, 7392 i(local) { 7393 if (current) return; 7394 transition_in(statustracker.$$.fragment, local); 7395 transition_in(staticaudio.$$.fragment, local); 7396 current = true; 7397 }, 7398 o(local) { 7399 transition_out(statustracker.$$.fragment, local); 7400 transition_out(staticaudio.$$.fragment, local); 7401 current = false; 7402 }, 7403 d(detaching) { 7404 if (detaching) { 7405 detach(t); 7406 } 7407 7408 destroy_component(statustracker, detaching); 7409 destroy_component(staticaudio, detaching); 7410 } 7411 }; 7412} 7413 7414function create_fragment(ctx) { 7415 let current_block_type_index; 7416 let if_block; 7417 let if_block_anchor; 7418 let current; 7419 const if_block_creators = [create_if_block, create_else_block]; 7420 const if_blocks = []; 7421 7422 function select_block_type(ctx, dirty) { 7423 if (!/*interactive*/ ctx[5]) return 0; 7424 return 1; 7425 } 7426 7427 current_block_type_index = select_block_type(ctx); 7428 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 7429 7430 return { 7431 c() { 7432 if_block.c(); 7433 if_block_anchor = empty(); 7434 }, 7435 m(target, anchor) { 7436 if_blocks[current_block_type_index].m(target, anchor); 7437 insert(target, if_block_anchor, anchor); 7438 current = true; 7439 }, 7440 p(ctx, dirty) { 7441 let previous_block_index = current_block_type_index; 7442 current_block_type_index = select_block_type(ctx); 7443 7444 if (current_block_type_index === previous_block_index) { 7445 if_blocks[current_block_type_index].p(ctx, dirty); 7446 } else { 7447 group_outros(); 7448 7449 transition_out(if_blocks[previous_block_index], 1, 1, () => { 7450 if_blocks[previous_block_index] = null; 7451 }); 7452 7453 check_outros(); 7454 if_block = if_blocks[current_block_type_index]; 7455 7456 if (!if_block) { 7457 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 7458 if_block.c(); 7459 } else { 7460 if_block.p(ctx, dirty); 7461 } 7462 7463 transition_in(if_block, 1); 7464 if_block.m(if_block_anchor.parentNode, if_block_anchor); 7465 } 7466 }, 7467 i(local) { 7468 if (current) return; 7469 transition_in(if_block); 7470 current = true; 7471 }, 7472 o(local) { 7473 transition_out(if_block); 7474 current = false; 7475 }, 7476 d(detaching) { 7477 if (detaching) { 7478 detach(if_block_anchor); 7479 } 7480 7481 if_blocks[current_block_type_index].d(detaching); 7482 } 7483 }; 7484} 7485 7486function instance($$self, $$props, $$invalidate) { 7487 let { elem_id = "" } = $$props; 7488 let { elem_classes = [] } = $$props; 7489 let { visible = true } = $$props; 7490 let { interactive } = $$props; 7491 let { value = null } = $$props; 7492 let { sources } = $$props; 7493 let { label } = $$props; 7494 let { root } = $$props; 7495 let { show_label } = $$props; 7496 let { proxy_url } = $$props; 7497 let { container = true } = $$props; 7498 let { scale = null } = $$props; 7499 let { min_width = undefined } = $$props; 7500 let { loading_status } = $$props; 7501 let { autoplay = false } = $$props; 7502 let { show_download_button = true } = $$props; 7503 let { show_share_button = false } = $$props; 7504 let { waveform_options = {} } = $$props; 7505 let { pending } = $$props; 7506 let { streaming } = $$props; 7507 let { gradio } = $$props; 7508 let old_value = null; 7509 let _value; 7510 let active_source; 7511 let initial_value = value; 7512 7513 const handle_reset_value = () => { 7514 if (initial_value === null || value === initial_value) { 7515 return; 7516 } 7517 7518 $$invalidate(0, value = initial_value); 7519 }; 7520 7521 let dragging; 7522 let waveform_settings; 7523 7524 const trim_region_settings = { 7525 color: waveform_options.trim_region_color || "hsla(15, 85%, 40%, 0.4)", 7526 drag: true, 7527 resize: true 7528 }; 7529 7530 function handle_error({ detail }) { 7531 const [level, status] = detail.includes("Invalid file type") 7532 ? ["warning", "complete"] 7533 : ["error", "error"]; 7534
7535 $$invalidate(1, loading_status = loading_status || {}); 7536 $$invalidate(1, loading_status.status = status, loading_status); 7537 $$invalidate(1, loading_status.message = detail, loading_status); 7538 gradio.dispatch(level, detail); 7539 } 7540 7541 const share_handler = e => gradio.dispatch("share", e.detail); 7542 const error_handler = e => gradio.dispatch("error", e.detail); 7543 const play_handler = () => gradio.dispatch("play"); 7544 const pause_handler = () => gradio.dispatch("pause"); 7545 const stop_handler = () => gradio.dispatch("stop"); 7546 7547 function interactiveaudio_dragging_binding(value) { 7548 dragging = value; 7549 $$invalidate(21, dragging); 7550 } 7551 7552 const change_handler = ({ detail }) => $$invalidate(0, value = detail); 7553 7554 const stream_handler = ({ detail }) => { 7555 $$invalidate(0, value = detail); 7556 gradio.dispatch("stream", value); 7557 }; 7558 7559 const drag_handler = ({ detail }) => $$invalidate(21, dragging = detail); 7560 const edit_handler = () => gradio.dispatch("edit"); 7561 const play_handler_1 = () => gradio.dispatch("play"); 7562 const pause_handler_1 = () => gradio.dispatch("pause"); 7563 const stop_handler_1 = () => gradio.dispatch("stop"); 7564 const start_recording_handler = () => gradio.dispatch("start_recording"); 7565 const pause_recording_handler = () => gradio.dispatch("pause_recording"); 7566 const stop_recording_handler = e => gradio.dispatch("stop_recording", e.detail); 7567 const upload_handler = () => gradio.dispatch("upload"); 7568 const clear_handler = () => gradio.dispatch("clear"); 7569 7570 $$self.$$set = $$props => {
7571 if ('elem_id' in $$props) $$invalidate(2, elem_id = $$props.elem_id); 7572 if ('elem_classes' in $$props) $$invalidate(3, elem_classes = $$props.elem_classes); 7573 if ('visible' in $$props) $$invalidate(4, visible = $$props.visible); 7574 if ('interactive' in $$props) $$invalidate(5, interactive = $$props.interactive); 7575 if ('value' in $$props) $$invalidate(0, value = $$props.value); 7576 if ('sources' in $$props) $$invalidate(6, sources = $$props.sources); 7577 if ('label' in $$props) $$invalidate(7, label = $$props.label); 7578 if ('root' in $$props) $$invalidate(8, root = $$props.root); 7579 if ('show_label' in $$props) $$invalidate(9, show_label = $$props.show_label); 7580 if ('proxy_url' in $$props) $$invalidate(26, proxy_url = $$props.proxy_url); 7581 if ('container' in $$props) $$invalidate(10, container = $$props.container); 7582 if ('scale' in $$props) $$invalidate(11, scale = $$props.scale); 7583 if ('min_width' in $$props) $$invalidate(12, min_width = $$props.min_width); 7584 if ('loading_status' in $$props) $$invalidate(1, loading_status = $$props.loading_status);
7585 if ('autoplay' in $$props) $$invalidate(27, autoplay = $$props.autoplay); 7586 if ('show_download_button' in $$props) $$invalidate(13, show_download_button = $$props.show_download_button); 7587 if ('show_share_button' in $$props) $$invalidate(14, show_share_button = $$props.show_share_button); 7588 if ('waveform_options' in $$props) $$invalidate(15, waveform_options = $$props.waveform_options); 7589 if ('pending' in $$props) $$invalidate(16, pending = $$props.pending); 7590 if ('streaming' in $$props) $$invalidate(17, streaming = $$props.streaming); 7591 if ('gradio' in $$props) $$invalidate(18, gradio = $$props.gradio); 7592 }; 7593 7594 $$self.$$.update = () => { 7595 if ($$self.$$.dirty[0] & /*value, root, proxy_url*/ 67109121) { 7596 $$invalidate(19, _value = normalise_file(value, root, proxy_url)); 7597 } 7598 7599 if ($$self.$$.dirty[0] & /*value, initial_value*/ 536870913) { 7600 if (value && initial_value === null) { 7601 $$invalidate(29, initial_value = value); 7602 } 7603 } 7604 7605 if ($$self.$$.dirty[0] & /*value, old_value, gradio*/ 268697601) { 7606 { 7607 if (JSON.stringify(value) !== JSON.stringify(old_value)) { 7608 $$invalidate(28, old_value = value); 7609 gradio.dispatch("change"); 7610 } 7611 } 7612 } 7613 7614 if ($$self.$$.dirty[0] & /*sources*/ 64) { 7615 if (sources) { 7616 $$invalidate(20, active_source = sources[0]); 7617 } 7618 } 7619 7620 if ($$self.$$.dirty[0] & /*waveform_options, autoplay*/ 134250496) { 7621 $$invalidate(22, waveform_settings = { 7622 height: 50, 7623 waveColor: waveform_options.waveform_color || "#9ca3af", 7624 progressColor: waveform_options.waveform_progress_color || "#f97316", 7625 barWidth: 2, 7626 barGap: 3, 7627 cursorWidth: 2, 7628 cursorColor: "#ddd5e9", 7629 autoplay, 7630 barRadius: 10, 7631 dragToSeek: true, 7632 normalize: true, 7633 minPxPerSec: 20, 7634 mediaControls: waveform_options.show_controls 7635 }); 7636 } 7637 }; 7638 7639 return [ 7640 value, 7641 loading_status, 7642 elem_id, 7643 elem_classes, 7644 visible, 7645 interactive, 7646 sources, 7647 label, 7648 root, 7649 show_label, 7650 container, 7651 scale, 7652 min_width, 7653 show_download_button, 7654 show_share_button, 7655 waveform_options, 7656 pending, 7657 streaming, 7658 gradio, 7659 _value, 7660 active_source, 7661 dragging, 7662 waveform_settings, 7663 handle_reset_value, 7664 trim_region_settings, 7665 handle_error, 7666 proxy_url, 7667 autoplay, 7668 old_value, 7669 initial_value, 7670 share_handler, 7671 error_handler, 7672 play_handler, 7673 pause_handler, 7674 stop_handler, 7675 interactiveaudio_dragging_binding, 7676 change_handler, 7677 stream_handler, 7678 drag_handler, 7679 edit_handler, 7680 play_handler_1, 7681 pause_handler_1, 7682 stop_handler_1, 7683 start_recording_handler, 7684 pause_recording_handler, 7685 stop_recording_handler, 7686 upload_handler, 7687 clear_handler 7688 ]; 7689} 7690 7691class Index extends SvelteComponent { 7692 constructor(options) { 7693 super(); 7694 7695 init( 7696 this, 7697 options, 7698 instance, 7699 create_fragment, 7700 safe_not_equal, 7701 { 7702 elem_id: 2, 7703 elem_classes: 3, 7704 visible: 4, 7705 interactive: 5, 7706 value: 0, 7707 sources: 6, 7708 label: 7, 7709 root: 8, 7710 show_label: 9, 7711 proxy_url: 26, 7712 container: 10, 7713 scale: 11, 7714 min_width: 12, 7715 loading_status: 1, 7716 autoplay: 27, 7717 show_download_button: 13, 7718 show_share_button: 14, 7719 waveform_options: 15, 7720 pending: 16, 7721 streaming: 17, 7722 gradio: 18 7723 }, 7724 null, 7725 [-1, -1] 7726 ); 7727 } 7728 7729 get elem_id() { 7730 return this.$$.ctx[2]; 7731 } 7732 7733 set elem_id(elem_id) { 7734 this.$$set({ elem_id }); 7735 flush(); 7736 } 7737 7738 get elem_classes() { 7739 return this.$$.ctx[3]; 7740 } 7741 7742 set elem_classes(elem_classes) { 7743 this.$$set({ elem_classes }); 7744 flush(); 7745 } 7746 7747 get visible() { 7748 return this.$$.ctx[4]; 7749 } 7750 7751 set visible(visible) { 7752 this.$$set({ visible }); 7753 flush(); 7754 } 7755 7756 get interactive() { 7757 return this.$$.ctx[5]; 7758 } 7759 7760 set interactive(interactive) { 7761 this.$$set({ interactive }); 7762 flush(); 7763 } 7764 7765 get value() { 7766 return this.$$.ctx[0]; 7767 } 7768 7769 set value(value) { 7770 this.$$set({ value }); 7771 flush(); 7772 } 7773 7774 get sources() { 7775 return this.$$.ctx[6]; 7776 } 7777 7778 set sources(sources) { 7779 this.$$set({ sources }); 7780 flush(); 7781 } 7782 7783 get label() { 7784 return this.$$.ctx[7]; 7785 } 7786 7787 set label(label) { 7788 this.$$set({ label }); 7789 flush(); 7790 } 7791 7792 get root() { 7793 return this.$$.ctx[8]; 7794 } 7795 7796 set root(root) { 7797 this.$$set({ root }); 7798 flush(); 7799 } 7800 7801 get show_label() { 7802 return this.$$.ctx[9]; 7803 } 7804 7805 set show_label(show_label) { 7806 this.$$set({ show_label }); 7807 flush(); 7808 } 7809 7810 get proxy_url() { 7811 return this.$$.ctx[26]; 7812 } 7813 7814 set proxy_url(proxy_url) { 7815 this.$$set({ proxy_url }); 7816 flush(); 7817 } 7818 7819 get container() { 7820 return this.$$.ctx[10]; 7821 } 7822 7823 set container(container) { 7824 this.$$set({ container }); 7825 flush(); 7826 } 7827 7828 get scale() { 7829 return this.$$.ctx[11]; 7830 } 7831 7832 set scale(scale) { 7833 this.$$set({ scale }); 7834 flush(); 7835 } 7836 7837 get min_width() { 7838 return this.$$.ctx[12]; 7839 } 7840 7841 set min_width(min_width) { 7842 this.$$set({ min_width }); 7843 flush(); 7844 } 7845 7846 get loading_status() { 7847 return this.$$.ctx[1]; 7848 } 7849 7850 set loading_status(loading_status) { 7851 this.$$set({ loading_status }); 7852 flush(); 7853 } 7854 7855 get autoplay() { 7856 return this.$$.ctx[27]; 7857 } 7858 7859 set autoplay(autoplay) { 7860 this.$$set({ autoplay }); 7861 flush(); 7862 } 7863 7864 get show_download_button() { 7865 return this.$$.ctx[13]; 7866 } 7867 7868 set show_download_button(show_download_button) { 7869 this.$$set({ show_download_button }); 7870 flush(); 7871 } 7872 7873 get show_share_button() { 7874 return this.$$.ctx[14]; 7875 } 7876 7877 set show_share_button(show_share_button) { 7878 this.$$set({ show_share_button }); 7879 flush(); 7880 } 7881 7882 get waveform_options() { 7883 return this.$$.ctx[15]; 7884 } 7885 7886 set waveform_options(waveform_options) { 7887 this.$$set({ waveform_options }); 7888 flush(); 7889 } 7890 7891 get pending() { 7892 return this.$$.ctx[16]; 7893 } 7894 7895 set pending(pending) { 7896 this.$$set({ pending }); 7897 flush(); 7898 } 7899 7900 get streaming() { 7901 return this.$$.ctx[17]; 7902 } 7903 7904 set streaming(streaming) { 7905 this.$$set({ streaming }); 7906 flush(); 7907 } 7908 7909 get gradio() { 7910 return this.$$.ctx[18]; 7911 } 7912 7913 set gradio(gradio) { 7914 this.$$set({ gradio }); 7915 flush(); 7916 } 7917} 7918 7919const Index$1 = Index; 7920 7921export { InteractiveAudio$1 as BaseInteractiveAudio, AudioPlayer$1 as BasePlayer, StaticAudio$1 as BaseStaticAudio, Index$1 as default }; 7922//# sourceMappingURL=index-84ec2915.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.