1import { B as Block } from './Button-ae8ac060.js'; 2import { f as format_time, u as uploadToHuggingFace } from './utils-013c0d40.js'; 3import { B as BlockLabel } from './BlockLabel-6b11de4a.js'; 4import { I as IconButton } from './IconButton-bd112ebb.js'; 5import { E as Empty } from './Empty-b46533d1.js'; 6import { S as ShareButton } from './ShareButton-6733303d.js'; 7import { D as DownloadLink, a as Download } from './DownloadLink-7be2d3cf.js'; 8import { S as Static } from './Index-e8ffd830.js'; 9import { a as Play, P as Pause, T as Trim } from './Trim-0317ad89.js'; 10import { U as Undo } from './Undo-6c110254.js'; 11import { r as resolve_wasm_src } from './file-url-905a9712.js'; 12import { _ as __vitePreload, p as prepare_files, u as upload } from './index-dc71b4a2.js'; 13import { U as Upload } from './ModifyUpload.svelte_svelte_type_style_lang-ea09f196.js'; 14import { M as ModifyUpload } from './ModifyUpload-b44fd3ca.js'; 15import { S as SelectSource } from './SelectSource-40e08ead.js'; 16import { U as UploadText } from './UploadText-97b71c57.js'; 17export { default as BaseExample } from './Example-63607f02.js'; 18import './svelte/svelte.js'; 19import './Upload-96564545.js'; 20 21/* home/runner/work/gradio/gradio/js/icons/src/Backward.svelte generated by Svelte v4.2.2 */ 22const { 23 SvelteComponent: SvelteComponent$g, 24 append: append$d, 25 attr: attr$e, 26 detach: detach$g, 27 init: init$g, 28 insert: insert$g, 29 noop: noop$a, 30 safe_not_equal: safe_not_equal$g, 31 svg_element: svg_element$5 32} = window.__gradio__svelte__internal; 33function create_fragment$g(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$e(path, "stroke", "currentColor"); 42 attr$e(path, "stroke-width", "1.5"); 43 attr$e(path, "stroke-linecap", "round"); 44 attr$e(path, "stroke-linejoin", "round"); 45 attr$e(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$e(svg, "xmlns", "http://www.w3.org/2000/svg"); 47 attr$e(svg, "width", "24px"); 48 attr$e(svg, "height", "24px"); 49 attr$e(svg, "fill", "currentColor"); 50 attr$e(svg, "stroke-width", "1.5"); 51 attr$e(svg, "viewBox", "0 0 24 24"); 52 attr$e(svg, "color", "currentColor"); 53 }, 54 m(target, anchor) { 55 insert$g(target, svg, anchor); 56 append$d(svg, path); 57 }, 58 p: noop$a, 59 i: noop$a, 60 o: noop$a, 61 d(detaching) { 62 if (detaching) { 63 detach$g(svg); 64 } 65 } 66 }; 67} 68 69class Backward extends SvelteComponent$g { 70 constructor(options) { 71 super(); 72 init$g(this, options, null, create_fragment$g, safe_not_equal$g, {}); 73 } 74} 75 76/* home/runner/work/gradio/gradio/js/icons/src/Forward.svelte generated by Svelte v4.2.2 */ 77const { 78 SvelteComponent: SvelteComponent$f,
79 append: append$c, 80 attr: attr$d, 81 detach: detach$f, 82 init: init$f, 83 insert: insert$f, 84 noop: noop$9, 85 safe_not_equal: safe_not_equal$f, 86 svg_element: svg_element$4 87} = window.__gradio__svelte__internal; 88function create_fragment$f(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$d(path, "stroke", "currentColor"); 97 attr$d(path, "stroke-width", "1.5"); 98 attr$d(path, "stroke-linecap", "round"); 99 attr$d(path, "stroke-linejoin", "round"); 100 attr$d(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$d(svg, "xmlns", "http://www.w3.org/2000/svg"); 102 attr$d(svg, "width", "24px"); 103 attr$d(svg, "height", "24px"); 104 attr$d(svg, "fill", "currentColor"); 105 attr$d(svg, "stroke-width", "1.5"); 106 attr$d(svg, "viewBox", "0 0 24 24"); 107 attr$d(svg, "color", "currentColor"); 108 }, 109 m(target, anchor) { 110 insert$f(target, svg, anchor); 111 append$c(svg, path); 112 }, 113 p: noop$9, 114 i: noop$9, 115 o: noop$9, 116 d(detaching) { 117 if (detaching) { 118 detach$f(svg); 119 } 120 } 121 }; 122} 123 124class Forward extends SvelteComponent$f { 125 constructor(options) { 126 super(); 127 init$f(this, options, null, create_fragment$f, safe_not_equal$f, {}); 128 } 129} 130 131/* home/runner/work/gradio/gradio/js/icons/src/Music.svelte generated by Svelte v4.2.2 */ 132const { 133 SvelteComponent: SvelteComponent$e, 134 append: append$b, 135 attr: attr$c, 136 detach: detach$e, 137 init: init$e, 138 insert: insert$e, 139 noop: noop$8, 140 safe_not_equal: safe_not_equal$e, 141 svg_element: svg_element$3 142} = window.__gradio__svelte__internal; 143function create_fragment$e(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$c(path, "d", "M9 18V5l12-2v13"); 156 attr$c(circle0, "cx", "6"); 157 attr$c(circle0, "cy", "18"); 158 attr$c(circle0, "r", "3"); 159 attr$c(circle1, "cx", "18"); 160 attr$c(circle1, "cy", "16"); 161 attr$c(circle1, "r", "3"); 162 attr$c(svg, "xmlns", "http://www.w3.org/2000/svg"); 163 attr$c(svg, "width", "100%"); 164 attr$c(svg, "height", "100%"); 165 attr$c(svg, "viewBox", "0 0 24 24"); 166 attr$c(svg, "fill", "none"); 167 attr$c(svg, "stroke", "currentColor"); 168 attr$c(svg, "stroke-width", "1.5"); 169 attr$c(svg, "stroke-linecap", "round"); 170 attr$c(svg, "stroke-linejoin", "round"); 171 attr$c(svg, "class", "feather feather-music"); 172 }, 173 m(target, anchor) { 174 insert$e(target, svg, anchor); 175 append$b(svg, path); 176 append$b(svg, circle0); 177 append$b(svg, circle1); 178 }, 179 p: noop$8, 180 i: noop$8, 181 o: noop$8, 182 d(detaching) { 183 if (detaching) { 184 detach$e(svg); 185 } 186 } 187 }; 188} 189 190class Music extends SvelteComponent$e { 191 constructor(options) { 192 super(); 193 init$e(this, options, null, create_fragment$e, safe_not_equal$e, {}); 194 } 195} 196 197/* home/runner/work/gradio/gradio/js/icons/src/VolumeLow.svelte generated by Svelte v4.2.2 */ 198const { 199 SvelteComponent: SvelteComponent$d, 200 append: append$a, 201 attr: attr$b, 202 detach: detach$d, 203 init: init$d, 204 insert: insert$d, 205 noop: noop$7, 206 safe_not_equal: safe_not_equal$d, 207 svg_element: svg_element$2, 208 text: text$8 209} = window.__gradio__svelte__internal; 210function create_fragment$d(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$8("Low volume"); 222 path0 = svg_element$2("path"); 223 path1 = svg_element$2("path"); 224 attr$b(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$b(path0, "stroke-width", "1.5"); 226 attr$b(path0, "stroke-linecap", "round"); 227 attr$b(path0, "stroke-linejoin", "round"); 228 attr$b(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$b(path1, "stroke-width", "1.5"); 230 attr$b(svg, "width", "100%"); 231 attr$b(svg, "height", "100%"); 232 attr$b(svg, "viewBox", "0 0 24 24"); 233 attr$b(svg, "stroke-width", "1.5"); 234 attr$b(svg, "fill", "none"); 235 attr$b(svg, "xmlns", "http://www.w3.org/2000/svg"); 236 attr$b(svg, "stroke", "currentColor"); 237 attr$b(svg, "color", "currentColor"); 238 }, 239 m(target, anchor) { 240 insert$d(target, svg, anchor); 241 append$a(svg, title); 242 append$a(title, t); 243 append$a(svg, path0); 244 append$a(svg, path1); 245 }, 246 p: noop$7, 247 i: noop$7, 248 o: noop$7, 249 d(detaching) { 250 if (detaching) { 251 detach$d(svg); 252 } 253 } 254 }; 255} 256 257class VolumeLow extends SvelteComponent$d { 258 constructor(options) { 259 super(); 260 init$d(this, options, null, create_fragment$d, safe_not_equal$d, {}); 261 } 262} 263 264/* home/runner/work/gradio/gradio/js/icons/src/VolumeHigh.svelte generated by Svelte v4.2.2 */ 265const { 266 SvelteComponent: SvelteComponent$c, 267 append: append$9, 268 attr: attr$a, 269 detach: detach$c, 270 init: init$c, 271 insert: insert$c, 272 noop: noop$6, 273 safe_not_equal: safe_not_equal$c, 274 svg_element: svg_element$1, 275 text: text$7 276} = window.__gradio__svelte__internal; 277function create_fragment$c(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$7("High volume"); 290 path0 = svg_element$1("path"); 291 path1 = svg_element$1("path"); 292 path2 = svg_element$1("path"); 293 attr$a(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$a(path0, "stroke-width", "1.5"); 295 attr$a(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$a(path1, "stroke-width", "1.5"); 297 attr$a(path1, "stroke-linecap", "round"); 298 attr$a(path1, "stroke-linejoin", "round"); 299 attr$a(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$a(path2, "stroke-width", "1.5"); 301 attr$a(path2, "stroke-linecap", "round"); 302 attr$a(path2, "stroke-linejoin", "round"); 303 attr$a(svg, "width", "100%"); 304 attr$a(svg, "height", "100%"); 305 attr$a(svg, "viewBox", "0 0 24 24"); 306 attr$a(svg, "stroke-width", "1.5"); 307 attr$a(svg, "fill", "none"); 308 attr$a(svg, "stroke", "currentColor"); 309 attr$a(svg, "xmlns", "http://www.w3.org/2000/svg"); 310 attr$a(svg, "color", "currentColor"); 311 }, 312 m(target, anchor) { 313 insert$c(target, svg, anchor); 314 append$9(svg, title); 315 append$9(title, t); 316 append$9(svg, path0); 317 append$9(svg, path1); 318 append$9(svg, path2); 319 }, 320 p: noop$6, 321 i: noop$6, 322 o: noop$6, 323 d(detaching) { 324 if (detaching) { 325 detach$c(svg); 326 } 327 } 328 }; 329} 330 331class VolumeHigh extends SvelteComponent$c { 332 constructor(options) { 333 super(); 334 init$c(this, options, null, create_fragment$c, safe_not_equal$c, {}); 335 } 336} 337 338/* home/runner/work/gradio/gradio/js/icons/src/VolumeMuted.svelte generated by Svelte v4.2.2 */ 339const { 340 SvelteComponent: SvelteComponent$b, 341 append: append$8, 342 attr: attr$9, 343 detach: detach$b, 344 init: init$b, 345 insert: insert$b,
346 noop: noop$5, 347 safe_not_equal: safe_not_equal$b, 348 svg_element, 349 text: text$6 350} = window.__gradio__svelte__internal; 351function create_fragment$b(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$6("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$9(path0, "d", "M18 14L20.0005 12M22 10L20.0005 12M20.0005 12L18 10M20.0005 12L22 14"); 374 attr$9(path0, "stroke-width", "1.5"); 375 attr$9(path0, "stroke-linecap", "round"); 376 attr$9(path0, "stroke-linejoin", "round"); 377 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"); 378 attr$9(path1, "stroke-width", "1.5"); 379 attr$9(g, "clip-path", "url(#clip0_3173_16686)"); 380 attr$9(rect, "width", "24"); 381 attr$9(rect, "height", "24"); 382 attr$9(rect, "fill", "white"); 383 attr$9(clipPath, "id", "clip0_3173_16686"); 384 attr$9(svg, "width", "100%"); 385 attr$9(svg, "height", "100%"); 386 attr$9(svg, "viewBox", "0 0 24 24"); 387 attr$9(svg, "stroke-width", "1.5"); 388 attr$9(svg, "fill", "none"); 389 attr$9(svg, "xmlns", "http://www.w3.org/2000/svg"); 390 attr$9(svg, "stroke", "currentColor"); 391 attr$9(svg, "color", "currentColor"); 392 }, 393 m(target, anchor) { 394 insert$b(target, svg, anchor); 395 append$8(svg, title); 396 append$8(title, t); 397 append$8(svg, g); 398 append$8(g, path0); 399 append$8(g, path1); 400 append$8(svg, defs); 401 append$8(defs, clipPath); 402 append$8(clipPath, rect); 403 }, 404 p: noop$5, 405 i: noop$5, 406 o: noop$5, 407 d(detaching) { 408 if (detaching) { 409 detach$b(svg); 410 } 411 } 412 }; 413} 414 415class VolumeMuted extends SvelteComponent$b { 416 constructor(options) { 417 super(); 418 init$b(this, options, null, create_fragment$b, safe_not_equal$b, {}); 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.length; i++) { 1802 for (let channel = 0; channel < numOfChan; channel++) { 1803 const sample = Math.max( 1804 -1,
1805 Math.min(1, audioBuffer.getChannelData(channel)[i]) 1806 ); 1807 view.setInt16(offset, sample * 32767, true); 1808 offset += 2; 1809 } 1810 } 1811 return new Uint8Array(buffer); 1812} 1813 1814const process_audio = async (audioBuffer, start, end, waveform_sample_rate) => { 1815 const audioContext = new AudioContext({ 1816 sampleRate: waveform_sample_rate || audioBuffer.sampleRate 1817 }); 1818 const numberOfChannels = audioBuffer.numberOfChannels; 1819 const sampleRate = waveform_sample_rate || audioBuffer.sampleRate; 1820 let trimmedLength = audioBuffer.length; 1821 let startOffset = 0; 1822 if (start && end) { 1823 startOffset = Math.round(start * sampleRate); 1824 const endOffset = Math.round(end * sampleRate); 1825 trimmedLength = endOffset - startOffset; 1826 } 1827 const trimmedAudioBuffer = audioContext.createBuffer( 1828 numberOfChannels, 1829 trimmedLength, 1830 sampleRate 1831 ); 1832 for (let channel = 0; channel < numberOfChannels; channel++) { 1833 const channelData = audioBuffer.getChannelData(channel); 1834 const trimmedData = trimmedAudioBuffer.getChannelData(channel); 1835 for (let i = 0; i < trimmedLength; i++) { 1836 trimmedData[i] = channelData[startOffset + i]; 1837 } 1838 } 1839 return audioBufferToWav(trimmedAudioBuffer); 1840}; 1841const skip_audio = (waveform, amount) => { 1842 if (!waveform) 1843 return; 1844 waveform.skip(amount); 1845}; 1846const get_skip_rewind_amount = (audio_duration, skip_length) => { 1847 if (!skip_length) { 1848 skip_length = 5; 1849 } 1850 return audio_duration / 100 * skip_length || 5; 1851}; 1852 1853let 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}%;
1853\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",(()=>
1853{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();}}; 1854 1855/* home/runner/work/gradio/gradio/js/audio/shared/VolumeLevels.svelte generated by Svelte v4.2.2 */ 1856const { 1857 SvelteComponent: SvelteComponent$a, 1858 check_outros: check_outros$6, 1859 create_component: create_component$8, 1860 destroy_component: destroy_component$8, 1861 detach: detach$a, 1862 empty: empty$6, 1863 group_outros: group_outros$6, 1864 init: init$a, 1865 insert: insert$a, 1866 mount_component: mount_component$8, 1867 safe_not_equal: safe_not_equal$a, 1868 transition_in: transition_in$8, 1869 transition_out: transition_out$8 1870} = window.__gradio__svelte__internal; 1871function create_if_block_2$5(ctx) { 1872 let volumehigh; 1873 let current; 1874 volumehigh = new VolumeHigh({}); 1875 1876 return { 1877 c() { 1878 create_component$8(volumehigh.$$.fragment); 1879 }, 1880 m(target, anchor) { 1881 mount_component$8(volumehigh, target, anchor); 1882 current = true; 1883 }, 1884 i(local) { 1885 if (current) return; 1886 transition_in$8(volumehigh.$$.fragment, local); 1887 current = true; 1888 }, 1889 o(local) { 1890 transition_out$8(volumehigh.$$.fragment, local); 1891 current = false; 1892 }, 1893 d(detaching) { 1894 destroy_component$8(volumehigh, detaching); 1895 } 1896 }; 1897} 1898 1899// (7:30) 1900function create_if_block_1$6(ctx) { 1901 let volumelow; 1902 let current; 1903 volumelow = new VolumeLow({}); 1904 1905 return { 1906 c() { 1907 create_component$8(volumelow.$$.fragment); 1908 }, 1909 m(target, anchor) { 1910 mount_component$8(volumelow, target, anchor); 1911 current = true; 1912 }, 1913 i(local) { 1914 if (current) return; 1915 transition_in$8(volumelow.$$.fragment, local); 1916 current = true; 1917 }, 1918 o(local) { 1919 transition_out$8(volumelow.$$.fragment, local); 1920 current = false; 1921 }, 1922 d(detaching) { 1923 destroy_component$8(volumelow, detaching); 1924 } 1925 }; 1926} 1927 1928// (5:0) {#if currentVolume == 0} 1929function create_if_block$9(ctx) { 1930 let volumemuted; 1931 let current; 1932 volumemuted = new VolumeMuted({}); 1933 1934 return { 1935 c() { 1936 create_component$8(volumemuted.$$.fragment); 1937 }, 1938 m(target, anchor) { 1939 mount_component$8(volumemuted, target, anchor); 1940 current = true; 1941 }, 1942 i(local) { 1943 if (current) return; 1944 transition_in$8(volumemuted.$$.fragment, local); 1945 current = true; 1946 }, 1947 o(local) { 1948 transition_out$8(volumemuted.$$.fragment, local); 1949 current = false; 1950 }, 1951 d(detaching) { 1952 destroy_component$8(volumemuted, detaching); 1953 } 1954 }; 1955} 1956 1957function create_fragment$a(ctx) { 1958 let current_block_type_index; 1959 let if_block; 1960 let if_block_anchor; 1961 let current; 1962 const if_block_creators = [create_if_block$9, create_if_block_1$6, create_if_block_2$5]; 1963 const if_blocks = []; 1964 1965 function select_block_type(ctx, dirty) { 1966 if (/*currentVolume*/ ctx[0] == 0) return 0; 1967 if (/*currentVolume*/ ctx[0] < 0.5) return 1; 1968 if (/*currentVolume*/ ctx[0] >= 0.5) return 2; 1969 return -1; 1970 } 1971 1972 if (~(current_block_type_index = select_block_type(ctx))) { 1973 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 1974 } 1975 1976 return { 1977 c() { 1978 if (if_block) if_block.c(); 1979 if_block_anchor = empty$6(); 1980 }, 1981 m(target, anchor) { 1982 if (~current_block_type_index) { 1983 if_blocks[current_block_type_index].m(target, anchor); 1984 } 1985 1986 insert$a(target, if_block_anchor, anchor); 1987 current = true; 1988 }, 1989 p(ctx, [dirty]) { 1990 let previous_block_index = current_block_type_index; 1991 current_block_type_index = select_block_type(ctx); 1992 1993 if (current_block_type_index !== previous_block_index) { 1994 if (if_block) { 1995 group_outros$6(); 1996 1997 transition_out$8(if_blocks[previous_block_index], 1, 1, () => { 1998 if_blocks[previous_block_index] = null; 1999 }); 2000 2001 check_outros$6(); 2002 } 2003 2004 if (~current_block_type_index) { 2005 if_block = if_blocks[current_block_type_index]; 2006 2007 if (!if_block) { 2008 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2009 if_block.c(); 2010 } 2011 2012 transition_in$8(if_block, 1); 2013 if_block.m(if_block_anchor.parentNode, if_block_anchor); 2014 } else { 2015 if_block = null; 2016 } 2017 } 2018 }, 2019 i(local) { 2020 if (current) return; 2021 transition_in$8(if_block); 2022 current = true; 2023 }, 2024 o(local) { 2025 transition_out$8(if_block); 2026 current = false;
2027 }, 2028 d(detaching) { 2029 if (detaching) { 2030 detach$a(if_block_anchor); 2031 } 2032 2033 if (~current_block_type_index) { 2034 if_blocks[current_block_type_index].d(detaching); 2035 } 2036 } 2037 }; 2038} 2039 2040function instance$a($$self, $$props, $$invalidate) { 2041 let { currentVolume } = $$props; 2042 2043 $$self.$$set = $$props => { 2044 if ('currentVolume' in $$props) $$invalidate(0, currentVolume = $$props.currentVolume); 2045 }; 2046 2047 return [currentVolume]; 2048} 2049 2050class VolumeLevels extends SvelteComponent$a { 2051 constructor(options) { 2052 super(); 2053 init$a(this, options, instance$a, create_fragment$a, safe_not_equal$a, { currentVolume: 0 }); 2054 } 2055} 2056 2057const VolumeControl_svelte_svelte_type_style_lang = ''; 2058 2059/* home/runner/work/gradio/gradio/js/audio/shared/VolumeControl.svelte generated by Svelte v4.2.2 */ 2060const { 2061 SvelteComponent: SvelteComponent$9, 2062 attr: attr$8, 2063 binding_callbacks: binding_callbacks$7, 2064 detach: detach$9, 2065 element: element$8, 2066 init: init$9, 2067 insert: insert$9, 2068 listen: listen$3, 2069 noop: noop$4, 2070 run_all: run_all$2, 2071 safe_not_equal: safe_not_equal$9 2072} = window.__gradio__svelte__internal; 2073const { onMount: onMount$3 } = window.__gradio__svelte__internal; 2074function create_fragment$9(ctx) { 2075 let input; 2076 let mounted; 2077 let dispose; 2078 2079 return { 2080 c() { 2081 input = element$8("input"); 2082 attr$8(input, "id", "volume"); 2083 attr$8(input, "class", "volume-slider svelte-wuo8j5"); 2084 attr$8(input, "type", "range"); 2085 attr$8(input, "min", "0"); 2086 attr$8(input, "max", "1"); 2087 attr$8(input, "step", "0.01"); 2088 input.value = /*currentVolume*/ ctx[0]; 2089 }, 2090 m(target, anchor) { 2091 insert$9(target, input, anchor); 2092 /*input_binding*/ ctx[4](input); 2093 2094 if (!mounted) { 2095 dispose = [ 2096 listen$3(input, "focusout", /*focusout_handler*/ ctx[5]), 2097 listen$3(input, "input", /*input_handler*/ ctx[6]) 2098 ]; 2099 2100 mounted = true; 2101 } 2102 }, 2103 p(ctx, [dirty]) { 2104 if (dirty & /*currentVolume*/ 1) { 2105 input.value = /*currentVolume*/ ctx[0]; 2106 } 2107 }, 2108 i: noop$4, 2109 o: noop$4, 2110 d(detaching) { 2111 if (detaching) { 2112 detach$9(input); 2113 } 2114 2115 /*input_binding*/ ctx[4](null); 2116 mounted = false; 2117 run_all$2(dispose); 2118 } 2119 }; 2120} 2121 2122function instance$9($$self, $$props, $$invalidate) { 2123 let { currentVolume = 1 } = $$props; 2124 let { show_volume_slider = false } = $$props; 2125 let { waveform } = $$props; 2126 let volumeElement; 2127 2128 onMount$3(() => { 2129 adjustSlider(); 2130 }); 2131 2132 const adjustSlider = () => { 2133 let slider = volumeElement; 2134 if (!slider) return; 2135 slider.style.background = `linear-gradient(to right, var(--color-accent) ${currentVolume * 100}%, var(--neutral-400) ${currentVolume * 100}%)`; 2136 }; 2137 2138 function input_binding($$value) { 2139 binding_callbacks$7[$$value ? 'unshift' : 'push'](() => { 2140 volumeElement = $$value; 2141 $$invalidate(3, volumeElement); 2142 }); 2143 } 2144 2145 const focusout_handler = () =>
2145 $$invalidate(1, show_volume_slider = false); 2146 2147 const input_handler = e => { 2148 if (e.target instanceof HTMLInputElement) { 2149 $$invalidate(0, currentVolume = parseFloat(e.target.value)); 2150 waveform.setVolume(currentVolume); 2151 } 2152 }; 2153 2154 $$self.$$set = $$props => { 2155 if ('currentVolume' in $$props) $$invalidate(0, currentVolume = $$props.currentVolume); 2156 if ('show_volume_slider' in $$props) $$invalidate(1, show_volume_slider = $$props.show_volume_slider); 2157 if ('waveform' in $$props) $$invalidate(2, waveform = $$props.waveform); 2158 }; 2159 2160 $$self.$$.update = () => { 2161 if ($$self.$$.dirty & /*currentVolume*/ 1) { 2162 (adjustSlider()); 2163 } 2164 }; 2165 2166 return [ 2167 currentVolume, 2168 show_volume_slider, 2169 waveform, 2170 volumeElement, 2171 input_binding, 2172 focusout_handler, 2173 input_handler 2174 ]; 2175} 2176 2177class VolumeControl extends SvelteComponent$9 { 2178 constructor(options) { 2179 super(); 2180 2181 init$9(this, options, instance$9, create_fragment$9, safe_not_equal$9, { 2182 currentVolume: 0, 2183 show_volume_slider: 1, 2184 waveform: 2 2185 }); 2186 } 2187} 2188 2189const WaveformControls_svelte_svelte_type_style_lang = ''; 2190 2191/* home/runner/work/gradio/gradio/js/audio/shared/WaveformControls.svelte generated by Svelte v4.2.2 */ 2192const { 2193 SvelteComponent: SvelteComponent$8, 2194 add_flush_callback: add_flush_callback$6, 2195 append: append$7, 2196 attr: attr$7, 2197 bind: bind$6, 2198 binding_callbacks: binding_callbacks$6, 2199 check_outros: check_outros$5, 2200 create_component: create_component$7, 2201 destroy_component: destroy_component$7, 2202 detach: detach$8, 2203 element: element$7, 2204 empty: empty$5, 2205 group_outros: group_outros$5, 2206 init: init$8, 2207 insert: insert$8, 2208 listen: listen$2, 2209 mount_component: mount_component$7, 2210 noop: noop$3, 2211 run_all: run_all$1, 2212 safe_not_equal: safe_not_equal$8, 2213 set_data: set_data$5, 2214 set_style: set_style$1, 2215 space: space$7, 2216 text: text$5, 2217 toggle_class, 2218 transition_in: transition_in$7, 2219 transition_out: transition_out$7 2220} = window.__gradio__svelte__internal; 2221function create_if_block_4$1(ctx) { 2222 let volumecontrol; 2223 let updating_currentVolume; 2224 let updating_show_volume_slider; 2225 let current; 2226 2227 function volumecontrol_currentVolume_binding(value) { 2228 /*volumecontrol_currentVolume_binding*/ ctx[27](value); 2229 } 2230 2231 function volumecontrol_show_volume_slider_binding(value) { 2232 /*volumecontrol_show_volume_slider_binding*/ ctx[28](value); 2233 } 2234 2235 let volumecontrol_props = { waveform: /*waveform*/ ctx[2] }; 2236 2237 if (/*currentVolume*/ ctx[12] !== void 0) { 2238 volumecontrol_props.currentVolume = /*currentVolume*/ ctx[12]; 2239 } 2240 2241 if (/*show_volume_slider*/ ctx[1] !== void 0) { 2242 volumecontrol_props.show_volume_slider = /*show_volume_slider*/ ctx[1]; 2243 } 2244 2245 volumecontrol = new VolumeControl({ props: volumecontrol_props }); 2246 binding_callbacks$6.push(() => bind$6(volumecontrol, 'currentVolume', volumecontrol_currentVolume_binding)); 2247 binding_callbacks$6.push(() => bind$6(volumecontrol, 'show_volume_slider', volumecontrol_show_volume_slider_binding)); 2248 2249 return { 2250 c() { 2251 create_component$7(volumecontrol.$$.fragment); 2252 }, 2253 m(target, anchor) { 2254 mount_component$7(volumecontrol, target, anchor); 2255 current = true; 2256 }, 2257 p(ctx, dirty) { 2258 const volumecontrol_changes = {}; 2259 if (dirty[0] & /*waveform*/ 4) volumecontrol_changes.waveform = /*waveform*/ ctx[2]; 2260 2261 if (!updating_currentVolume && dirty[0] & /*currentVolume*/ 4096) { 2262 updating_currentVolume = true; 2263 volumecontrol_changes.currentVolume = /*currentVolume*/ ctx[12]; 2264 add_flush_callback$6(() => updating_currentVolume = false); 2265 } 2266 2267 if (!updating_show_volume_slider && dirty[0] & /*show_volume_slider*/ 2) { 2268 updating_show_volume_slider = true; 2269 volumecontrol_changes.show_volume_slider = /*show_volume_slider*/ ctx[1]; 2270 add_flush_callback$6(() => updating_show_volume_slider = false); 2271 } 2272 2273 volumecontrol.$set(volumecontrol_changes); 2274 }, 2275 i(local) { 2276 if (current) return; 2277 transition_in$7(volumecontrol.$$.fragment, local); 2278 current = true; 2279 }, 2280 o(local) { 2281 transition_out$7(volumecontrol.$$.fragment, local); 2282 current = false; 2283 }, 2284 d(detaching) { 2285 destroy_component$7(volumecontrol, detaching); 2286 } 2287 }; 2288} 2289 2290// (200:3) {:else} 2291function create_else_block_1$1(ctx) { 2292 let play; 2293 let current; 2294 play = new Play({}); 2295 2296 return { 2297 c() { 2298 create_component$7(play.$$.fragment); 2299 }, 2300 m(target, anchor) { 2301 mount_component$7(play, target, anchor); 2302 current = true; 2303 }, 2304 i(local) { 2305 if (current) return; 2306 transition_in$7(play.$$.fragment, local); 2307 current = true; 2308 }, 2309 o(local) { 2310 transition_out$7(play.$$.fragment, local); 2311 current = false;
2312 }, 2313 d(detaching) { 2314 destroy_component$7(play, detaching); 2315 } 2316 }; 2317} 2318 2319// (198:3) {#if playing} 2320function create_if_block_3$3(ctx) { 2321 let pause; 2322 let current; 2323 pause = new Pause({}); 2324 2325 return { 2326 c() { 2327 create_component$7(pause.$$.fragment); 2328 }, 2329 m(target, anchor) { 2330 mount_component$7(pause, target, anchor); 2331 current = true; 2332 }, 2333 i(local) { 2334 if (current) return; 2335 transition_in$7(pause.$$.fragment, local); 2336 current = true; 2337 }, 2338 o(local) { 2339 transition_out$7(pause.$$.fragment, local); 2340 current = false; 2341 }, 2342 d(detaching) { 2343 destroy_component$7(pause, detaching); 2344 } 2345 }; 2346} 2347 2348// (220:2) {#if editable && interactive} 2349function create_if_block$8(ctx) { 2350 let t; 2351 let current_block_type_index; 2352 let if_block1; 2353 let if_block1_anchor; 2354 let current; 2355 let if_block0 = /*show_redo*/ ctx[6] && /*mode*/ ctx[0] === "" && create_if_block_2$4(ctx); 2356 const if_block_creators = [create_if_block_1$5, create_else_block$7]; 2357 const if_blocks = []; 2358 2359 function select_block_type_1(ctx, dirty) { 2360 if (/*mode*/ ctx[0] === "") return 0; 2361 return 1; 2362 } 2363 2364 current_block_type_index = select_block_type_1(ctx); 2365 if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2366 2367 return { 2368 c() { 2369 if (if_block0) if_block0.c(); 2370 t = space$7(); 2371 if_block1.c(); 2372 if_block1_anchor = empty$5(); 2373 }, 2374 m(target, anchor) { 2375 if (if_block0) if_block0.m(target, anchor); 2376 insert$8(target, t, anchor); 2377 if_blocks[current_block_type_index].m(target, anchor); 2378 insert$8(target, if_block1_anchor, anchor); 2379 current = true; 2380 }, 2381 p(ctx, dirty) { 2382 if (/*show_redo*/ ctx[6] && /*mode*/ ctx[0] === "") { 2383 if (if_block0) { 2384 if_block0.p(ctx, dirty); 2385 2386 if (dirty[0] & /*show_redo, mode*/ 65) { 2387 transition_in$7(if_block0, 1); 2388 } 2389 } else { 2390 if_block0 = create_if_block_2$4(ctx); 2391 if_block0.c(); 2392 transition_in$7(if_block0, 1); 2393 if_block0.m(t.parentNode, t); 2394 } 2395 } else if (if_block0) { 2396 group_outros$5(); 2397 2398 transition_out$7(if_block0, 1, 1, () => { 2399 if_block0 = null; 2400 }); 2401 2402 check_outros$5(); 2403 } 2404 2405 let previous_block_index = current_block_type_index; 2406 current_block_type_index = select_block_type_1(ctx); 2407 2408 if (current_block_type_index === previous_block_index) { 2409 if_blocks[current_block_type_index].p(ctx, dirty); 2410 } else { 2411 group_outros$5(); 2412 2413 transition_out$7(if_blocks[previous_block_index], 1, 1, () => { 2414 if_blocks[previous_block_index] = null; 2415 }); 2416 2417 check_outros$5(); 2418 if_block1 = if_blocks[current_block_type_index]; 2419 2420 if (!if_block1) { 2421 if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2422 if_block1.c(); 2423 } else { 2424 if_block1.p(ctx, dirty); 2425 } 2426 2427 transition_in$7(if_block1, 1); 2428 if_block1.m(if_block1_anchor.parentNode, if_block1_anchor); 2429 } 2430 }, 2431 i(local) { 2432 if (current) return; 2433 transition_in$7(if_block0); 2434 transition_in$7(if_block1); 2435 current = true; 2436 }, 2437 o(local) { 2438 transition_out$7(if_block0); 2439 transition_out$7(if_block1); 2440 current = false; 2441 }, 2442 d(detaching) { 2443 if (detaching) { 2444 detach$8(t); 2445 detach$8(if_block1_anchor); 2446 } 2447 2448 if (if_block0) if_block0.d(detaching); 2449 if_blocks[current_block_type_index].d(detaching); 2450 } 2451 }; 2452} 2453 2454// (221:3) {#if show_redo && mode === ""} 2455function create_if_block_2$4(ctx) { 2456 let button; 2457 let undo; 2458 let current; 2459 let mounted; 2460 let dispose; 2461 undo = new Undo({}); 2462 2463 return { 2464 c() { 2465 button = element$7("button"); 2466 create_component$7(undo.$$.fragment); 2467 attr$7(button, "class", "action icon svelte-16ezq5z"); 2468 attr$7(button, "aria-label", "Reset audio"); 2469 }, 2470 m(target, anchor) { 2471 insert$8(target, button, anchor); 2472 mount_component$7(undo, button, null); 2473 current = true; 2474 2475 if (!mounted) { 2476 dispose = listen$2(button, "click", /*click_handler_5*/ ctx[33]); 2477 mounted = true; 2478 } 2479 }, 2480 p: noop$3, 2481 i(local) { 2482 if (current) return; 2483 transition_in$7(undo.$$.fragment, local); 2484 current = true; 2485 }, 2486 o(local) { 2487 transition_out$7(undo.$$.fragment, local); 2488 current = false; 2489 }, 2490 d(detaching) { 2491 if (detaching) { 2492 detach$8(button); 2493 } 2494 2495 destroy_component$7(undo);
2496 mounted = false; 2497 dispose(); 2498 } 2499 }; 2500} 2501 2502// (243:3) {:else} 2503function create_else_block$7(ctx) { 2504 let button0; 2505 let t1; 2506 let button1; 2507 let mounted; 2508 let dispose; 2509 2510 return { 2511 c() { 2512 button0 = element$7("button"); 2513 button0.textContent = "Trim"; 2514 t1 = space$7(); 2515 button1 = element$7("button"); 2516 button1.textContent = "Cancel"; 2517 attr$7(button0, "class", "text-button svelte-16ezq5z"); 2518 attr$7(button1, "class", "text-button svelte-16ezq5z"); 2519 }, 2520 m(target, anchor) { 2521 insert$8(target, button0, anchor); 2522 insert$8(target, t1, anchor); 2523 insert$8(target, button1, anchor); 2524 2525 if (!mounted) { 2526 dispose = [ 2527 listen$2(button0, "click", /*trimAudio*/ ctx[14]), 2528 listen$2(button1, "click", /*toggleTrimmingMode*/ ctx[16]) 2529 ]; 2530 2531 mounted = true; 2532 } 2533 }, 2534 p: noop$3, 2535 i: noop$3, 2536 o: noop$3, 2537 d(detaching) { 2538 if (detaching) { 2539 detach$8(button0); 2540 detach$8(t1); 2541 detach$8(button1); 2542 } 2543 2544 mounted = false; 2545 run_all$1(dispose); 2546 } 2547 }; 2548} 2549 2550// (235:3) {#if mode === ""} 2551function create_if_block_1$5(ctx) { 2552 let button; 2553 let trim; 2554 let current; 2555 let mounted; 2556 let dispose; 2557 trim = new Trim({}); 2558 2559 return { 2560 c() { 2561 button = element$7("button"); 2562 create_component$7(trim.$$.fragment); 2563 attr$7(button, "class", "action icon svelte-16ezq5z"); 2564 attr$7(button, "aria-label", "Trim audio to selection"); 2565 }, 2566 m(target, anchor) { 2567 insert$8(target, button, anchor); 2568 mount_component$7(trim, button, null); 2569 current = true; 2570 2571 if (!mounted) { 2572 dispose = listen$2(button, "click", /*toggleTrimmingMode*/ ctx[16]); 2573 mounted = true; 2574 } 2575 }, 2576 p: noop$3, 2577 i(local) { 2578 if (current) return; 2579 transition_in$7(trim.$$.fragment, local); 2580 current = true; 2581 }, 2582 o(local) { 2583 transition_out$7(trim.$$.fragment, local); 2584 current = false; 2585 }, 2586 d(detaching) { 2587 if (detaching) { 2588 detach$8(button); 2589 } 2590 2591 destroy_component$7(trim); 2592 mounted = false; 2593 dispose(); 2594 } 2595 }; 2596} 2597 2598function create_fragment$8(ctx) { 2599 let div3; 2600 let div0; 2601 let button0; 2602 let volumelevels; 2603 let t0; 2604 let t1; 2605 let button1; 2606 let span; 2607 let t2; 2608 let t3; 2609 let button1_aria_label_value; 2610 let t4; 2611 let div1; 2612 let button2; 2613 let backward; 2614 let button2_aria_label_value; 2615 let t5; 2616 let button3; 2617 let current_block_type_index; 2618 let if_block1; 2619 let button3_aria_label_value; 2620 let t6; 2621 let button4; 2622 let forward; 2623 let button4_aria_label_value; 2624 let t7; 2625 let div2; 2626 let current; 2627 let mounted; 2628 let dispose; 2629 2630 volumelevels = new VolumeLevels({ 2631 props: { currentVolume: /*currentVolume*/ ctx[12] } 2632 }); 2633 2634 let if_block0 = /*show_volume_slider*/ ctx[1] && create_if_block_4$1(ctx); 2635 backward = new Backward({}); 2636 const if_block_creators = [create_if_block_3$3, create_else_block_1$1]; 2637 const if_blocks = []; 2638 2639 function select_block_type(ctx, dirty) { 2640 if (/*playing*/ ctx[5]) return 0; 2641 return 1; 2642 } 2643 2644 current_block_type_index = select_block_type(ctx); 2645 if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2646 forward = new Forward({}); 2647 let if_block2 = /*editable*/ ctx[10] && /*interactive*/ ctx[7] && create_if_block$8(ctx); 2648 2649 return { 2650 c() { 2651 div3 = element$7("div"); 2652 div0 = element$7("div"); 2653 button0 = element$7("button"); 2654 create_component$7(volumelevels.$$.fragment); 2655 t0 = space$7(); 2656 if (if_block0) if_block0.c(); 2657 t1 = space$7(); 2658 button1 = element$7("button"); 2659 span = element$7("span"); 2660 t2 = text$5(/*playbackSpeed*/ ctx[11]); 2661 t3 = text$5("x"); 2662 t4 = space$7(); 2663 div1 = element$7("div"); 2664 button2 = element$7("button"); 2665 create_component$7(backward.$$.fragment); 2666 t5 = space$7(); 2667 button3 = element$7("button"); 2668 if_block1.c(); 2669 t6 = space$7(); 2670 button4 = element$7("button"); 2671 create_component$7(forward.$$.fragment); 2672 t7 = space$7(); 2673 div2 = element$7("div"); 2674 if (if_block2) if_block2.c(); 2675 attr$7(button0, "class", "action icon volume svelte-16ezq5z"); 2676 attr$7(button0, "aria-label", "Adjust volume"); 2677 2678 set_style$1(button0, "color", /*show_volume_slider*/ ctx[1] 2679 ? "var(--color-accent)" 2680 : "var(--neutral-400)"); 2681 2682 attr$7(button1, "class", "playback icon svelte-16ezq5z"); 2683 attr$7(button1, "aria-label", button1_aria_label_value = `Adjust playback speed to ${/*playbackSpeeds*/ ctx[13][(/*playbackSpeeds*/ ctx[13].indexOf(/*playbackSpeed*/ ctx[11]) + 1) % /*playbackSpeeds*/ ctx[13].length]}x`); 2684 toggle_class(button1, "hidden", /*show_volume_slider*/ ctx[1]); 2685 attr$7(div0, "class", "control-wrapper svelte-16ezq5z"); 2686 attr$7(button2, "class", "rewind icon svelte-16ezq5z"); 2687 attr$7(button2, "aria-label", button2_aria_label_value = `Skip backwards by ${get_skip_rewind_amount(/*audio_duration*/ ctx[3], /*waveform_options*/ ctx[9].skip_length)} seconds`); 2688 attr$7(button3, "class", "play-pause-button icon svelte-16ezq5z"); 2689 2690 attr$7(button3, "aria-label", button3_aria_label_value = /*playing*/ ctx[5] 2691 ? /*i18n*/ ctx[4]("audio.pause") 2692 : /*i18n*/ ctx[4]("audio.play")); 2693 2694 attr$7(button4, "class", "skip icon svelte-16ezq5z"); 2695 attr$7(button4, "aria-label", button4_aria_label_value = "Skip forward by " + get_skip_rewind_amount(/*audio_duration*/ ctx[3], /*waveform_options*/ ctx[9].skip_length) + " seconds"); 2696 attr$7(div1, "class", "play-pause-wrapper svelte-16ezq5z"); 2697 attr$7(div2, "class", "settings-wrapper svelte-16ezq5z"); 2698 attr$7(div3, "class", "controls svelte-16ezq5z");
2699 attr$7(div3, "data-testid", "waveform-controls"); 2700 }, 2701 m(target, anchor) { 2702 insert$8(target, div3, anchor); 2703 append$7(div3, div0); 2704 append$7(div0, button0); 2705 mount_component$7(volumelevels, button0, null); 2706 append$7(div0, t0); 2707 if (if_block0) if_block0.m(div0, null); 2708 append$7(div0, t1); 2709 append$7(div0, button1); 2710 append$7(button1, span); 2711 append$7(span, t2); 2712 append$7(span, t3); 2713 append$7(div3, t4); 2714 append$7(div3, div1); 2715 append$7(div1, button2); 2716 mount_component$7(backward, button2, null); 2717 append$7(div1, t5); 2718 append$7(div1, button3); 2719 if_blocks[current_block_type_index].m(button3, null); 2720 append$7(div1, t6); 2721 append$7(div1, button4); 2722 mount_component$7(forward, button4, null); 2723 append$7(div3, t7); 2724 append$7(div3, div2); 2725 if (if_block2) if_block2.m(div2, null); 2726 current = true; 2727 2728 if (!mounted) { 2729 dispose = [ 2730 listen$2(button0, "click", /*click_handler*/ ctx[26]), 2731 listen$2(button1, "click", /*click_handler_1*/ ctx[29]), 2732 listen$2(button2, "click", /*click_handler_2*/ ctx[30]), 2733 listen$2(button3, "click", /*click_handler_3*/ ctx[31]), 2734 listen$2(button4, "click", /*click_handler_4*/ ctx[32]) 2735 ]; 2736 2737 mounted = true; 2738 } 2739 }, 2740 p(ctx, dirty) { 2741 const volumelevels_changes = {}; 2742 if (dirty[0] & /*currentVolume*/ 4096) volumelevels_changes.currentVolume = /*currentVolume*/ ctx[12]; 2743 volumelevels.$set(volumelevels_changes); 2744 2745 if (dirty[0] & /*show_volume_slider*/ 2) { 2746 set_style$1(button0, "color", /*show_volume_slider*/ ctx[1] 2747 ? "var(--color-accent)" 2748 : "var(--neutral-400)"); 2749 } 2750 2751 if (/*show_volume_slider*/ ctx[1]) { 2752 if (if_block0) { 2753 if_block0.p(ctx, dirty); 2754 2755 if (dirty[0] & /*show_volume_slider*/ 2) { 2756 transition_in$7(if_block0, 1); 2757 } 2758 } else { 2759 if_block0 = create_if_block_4$1(ctx); 2760 if_block0.c(); 2761 transition_in$7(if_block0, 1); 2762 if_block0.m(div0, t1); 2763 } 2764 } else if (if_block0) { 2765 group_outros$5(); 2766 2767 transition_out$7(if_block0, 1, 1, () => { 2768 if_block0 = null; 2769 }); 2770 2771 check_outros$5(); 2772 } 2773 2774 if (!current || dirty[0] & /*playbackSpeed*/ 2048) set_data$5(t2, /*playbackSpeed*/ ctx[11]); 2775 2776 if (!current || dirty[0] & /*playbackSpeed*/ 2048 && button1_aria_label_value !== (button1_aria_label_value = `Adjust playback speed to ${/*playbackSpeeds*/ ctx[13][(/*playbackSpeeds*/ ctx[13].indexOf(/*playbackSpeed*/ ctx[11]) + 1) % /*playbackSpeeds*/ ctx[13].length]}x`)) { 2777 attr$7(button1, "aria-label", button1_aria_label_value); 2778 } 2779 2780 if (!current || dirty[0] & /*show_volume_slider*/ 2) { 2781 toggle_class(button1, "hidden", /*show_volume_slider*/ ctx[1]); 2782 } 2783 2784 if (!current || dirty[0] & /*audio_duration, waveform_options*/ 520 && button2_aria_label_value !== (button2_aria_label_value = `Skip backwards by ${get_skip_rewind_amount(/*audio_duration*/ ctx[3], /*waveform_options*/ ctx[9].skip_length)} seconds`)) { 2785 attr$7(button2, "aria-label", button2_aria_label_value); 2786 } 2787 2788 let previous_block_index = current_block_type_index; 2789 current_block_type_index = select_block_type(ctx); 2790 2791 if (current_block_type_index !== previous_block_index) { 2792 group_outros$5(); 2793 2794 transition_out$7(if_blocks[previous_block_index], 1, 1, () => { 2795 if_blocks[previous_block_index] = null; 2796 }); 2797 2798 check_outros$5(); 2799 if_block1 = if_blocks[current_block_type_index]; 2800 2801 if (!if_block1) { 2802 if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2803 if_block1.c(); 2804 } 2805 2806 transition_in$7(if_block1, 1); 2807 if_block1.m(button3, null); 2808 } 2809 2810 if (!current || dirty[0] & /*playing, i18n*/ 48 && button3_aria_label_value !== (button3_aria_label_value = /*playing*/ ctx[5] 2811 ? /*i18n*/ ctx[4]("audio.pause") 2812 : /*i18n*/ ctx[4]("audio.play"))) { 2813 attr$7(button3, "aria-label", button3_aria_label_value); 2814 } 2815 2816 if (!current || dirty[0] & /*audio_duration, waveform_options*/ 520 && button4_aria_label_value !== (button4_aria_label_value = "Skip forward by " + get_skip_rewind_amount(/*audio_duration*/ ctx[3], /*waveform_options*/ ctx[9].skip_length) + " seconds")) { 2817 attr$7(button4, "aria-label", button4_aria_label_value); 2818 } 2819 2820 if (/*editable*/ ctx[10] && /*interactive*/ ctx[7]) { 2821 if (if_block2) { 2822 if_block2.p(ctx, dirty); 2823
2824 if (dirty[0] & /*editable, interactive*/ 1152) { 2825 transition_in$7(if_block2, 1); 2826 } 2827 } else { 2828 if_block2 = create_if_block$8(ctx); 2829 if_block2.c(); 2830 transition_in$7(if_block2, 1); 2831 if_block2.m(div2, null); 2832 } 2833 } else if (if_block2) { 2834 group_outros$5(); 2835 2836 transition_out$7(if_block2, 1, 1, () => { 2837 if_block2 = null; 2838 }); 2839 2840 check_outros$5(); 2841 } 2842 }, 2843 i(local) { 2844 if (current) return; 2845 transition_in$7(volumelevels.$$.fragment, local); 2846 transition_in$7(if_block0); 2847 transition_in$7(backward.$$.fragment, local); 2848 transition_in$7(if_block1); 2849 transition_in$7(forward.$$.fragment, local); 2850 transition_in$7(if_block2); 2851 current = true; 2852 }, 2853 o(local) { 2854 transition_out$7(volumelevels.$$.fragment, local); 2855 transition_out$7(if_block0); 2856 transition_out$7(backward.$$.fragment, local); 2857 transition_out$7(if_block1); 2858 transition_out$7(forward.$$.fragment, local); 2859 transition_out$7(if_block2); 2860 current = false; 2861 }, 2862 d(detaching) { 2863 if (detaching) { 2864 detach$8(div3); 2865 } 2866 2867 destroy_component$7(volumelevels); 2868 if (if_block0) if_block0.d(); 2869 destroy_component$7(backward); 2870 if_blocks[current_block_type_index].d(); 2871 destroy_component$7(forward); 2872 if (if_block2) if_block2.d(); 2873 mounted = false; 2874 run_all$1(dispose); 2875 } 2876 }; 2877} 2878 2879function instance$8($$self, $$props, $$invalidate) { 2880 let { waveform } = $$props; 2881 let { audio_duration } = $$props; 2882 let { i18n } = $$props; 2883 let { playing } = $$props; 2884 let { show_redo = false } = $$props; 2885 let { interactive = false } = $$props; 2886 let { handle_trim_audio } = $$props; 2887 let { mode = "" } = $$props; 2888 let { container } = $$props; 2889 let { handle_reset_value } = $$props; 2890 let { waveform_options = {} } = $$props; 2891 let { trim_region_settings = {} } = $$props; 2892 let { show_volume_slider = false } = $$props; 2893 let { editable = true } = $$props; 2894 let { trimDuration = 0 } = $$props; 2895 let playbackSpeeds = [0.5, 1, 1.5, 2]; 2896 let playbackSpeed = playbackSpeeds[1]; 2897 let trimRegion; 2898 let activeRegion = null; 2899 let leftRegionHandle; 2900 let rightRegionHandle; 2901 let activeHandle = ""; 2902 let currentVolume = 1; 2903 2904 const addTrimRegion = () => { 2905 $$invalidate(22, activeRegion = trimRegion.addRegion({ 2906 start: audio_duration / 4, 2907 end: audio_duration / 2, 2908 ...trim_region_settings 2909 })); 2910 2911 $$invalidate(17, trimDuration = activeRegion.end - activeRegion.start); 2912 }; 2913 2914 const trimAudio = () => { 2915 if (waveform && trimRegion) { 2916 if (activeRegion) { 2917 const start = activeRegion.start; 2918 const end = activeRegion.end; 2919 handle_trim_audio(start, end); 2920 $$invalidate(0, mode = ""); 2921 $$invalidate(22, activeRegion = null); 2922 } 2923 } 2924 }; 2925 2926 const clearRegions = () => { 2927 trimRegion?.getRegions().forEach(region => { 2928 region.remove(); 2929 }); 2930 2931 trimRegion?.clearRegions(); 2932 }; 2933 2934 const toggleTrimmingMode = () => { 2935 clearRegions(); 2936 2937 if (mode === "edit") { 2938 $$invalidate(0, mode = ""); 2939 } else { 2940 $$invalidate(0, mode = "edit"); 2941 addTrimRegion(); 2942 } 2943 }; 2944 2945 const adjustRegionHandles = (handle, key) => { 2946 let newStart; 2947 let newEnd; 2948 if (!activeRegion) return; 2949 2950 if (handle === "left") { 2951 if (key === "ArrowLeft") { 2952 newStart = activeRegion.start - 0.05; 2953 newEnd = activeRegion.end; 2954 } else { 2955 newStart = activeRegion.start + 0.05; 2956 newEnd = activeRegion.end; 2957 } 2958 } else { 2959 if (key === "ArrowLeft") { 2960 newStart = activeRegion.start; 2961 newEnd = activeRegion.end - 0.05; 2962 } else { 2963 newStart = activeRegion.start; 2964 newEnd = activeRegion.end + 0.05; 2965 } 2966 } 2967 2968 activeRegion.setOptions({ start: newStart, end: newEnd }); 2969 $$invalidate(17, trimDuration = activeRegion.end - activeRegion.start); 2970 }; 2971 2972 const click_handler = () =>
2972 $$invalidate(1, show_volume_slider = !show_volume_slider); 2973 2974 function volumecontrol_currentVolume_binding(value) { 2975 currentVolume = value; 2976 $$invalidate(12, currentVolume); 2977 } 2978 2979 function volumecontrol_show_volume_slider_binding(value) { 2980 show_volume_slider = value; 2981 $$invalidate(1, show_volume_slider); 2982 } 2983 2984 const click_handler_1 = () => { 2985 $$invalidate(11, playbackSpeed = playbackSpeeds[(playbackSpeeds.indexOf(playbackSpeed) + 1) % playbackSpeeds.length]); 2986 waveform.setPlaybackRate(playbackSpeed); 2987 }; 2988 2989 const click_handler_2 = () => waveform.skip(get_skip_rewind_amount(audio_duration, waveform_options.skip_length) * -1); 2990 const click_handler_3 = () => waveform.playPause(); 2991 const click_handler_4 = () => waveform.skip(get_skip_rewind_amount(audio_duration, waveform_options.skip_length)); 2992 2993 const click_handler_5 = () => { 2994 handle_reset_value(); 2995 clearRegions(); 2996 $$invalidate(0, mode = ""); 2997 }; 2998 2999 $$self.$$set = $$props => { 3000 if ('waveform' in $$props) $$invalidate(2, waveform = $$props.waveform); 3001 if ('audio_duration' in $$props) $$invali
3001date(3, audio_duration = $$props.audio_duration); 3002 if ('i18n' in $$props) $$invalidate(4, i18n = $$props.i18n); 3003 if ('playing' in $$props) $$invalidate(5, playing = $$props.playing); 3004 if ('show_redo' in $$props) $$invalidate(6, show_redo = $$props.show_redo); 3005 if ('interactive' in $$props) $$invalidate(7, interactive = $$props.interactive); 3006 if ('handle_trim_audio' in $$props) $$invalidate(18, handle_trim_audio = $$props.handle_trim_audio); 3007 if ('mode' in $$props) $$invalidate(0, mode = $$props.mode); 3008 if ('container' in $$props) $$invalidate(19, container = $$props.container); 3009 if ('handle_reset_value' in $$props) $$invalidate(8, handle_reset_value = $$props.handle_reset_value); 3010 if ('waveform_options' in $$props) $$invalidate(9, waveform_options = $$props.waveform_options); 3011 if ('trim_region_settings' in $$props) $$invalidate(20, trim_region_settings = $$props.trim_region_settings); 3012 if ('show_volume_slider' in $$props) $$invalidate(1, show_volume_slider = $$props.show_volume_slider); 3013 if ('editable' in $$props) $$invali
3013date(10, editable = $$props.editable); 3014 if ('trimDuration' in $$props) $$invalidate(17, trimDuration = $$props.trimDuration); 3015 }; 3016 3017 $$self.$$.update = () => { 3018 if ($$self.$$.dirty[0] & /*waveform*/ 4) { 3019 $$invalidate(21, trimRegion = waveform.registerPlugin(s$1.create())); 3020 } 3021 3022 if ($$self.$$.dirty[0] & /*trimRegion*/ 2097152) { 3023 trimRegion?.on("region-out", region => { 3024 region.play(); 3025 }); 3026 } 3027 3028 if ($$self.$$.dirty[0] & /*trimRegion*/ 2097152) { 3029 trimRegion?.on("region-updated", region => { 3030 $$invalidate(17, trimDuration = region.end - region.start); 3031 }); 3032 } 3033 3034 if ($$self.$$.dirty[0] & /*trimRegion*/ 2097152) { 3035 trimRegion?.on("region-clicked", (region, e) => { 3036 e.stopPropagation(); // prevent triggering a click on the waveform 3037 $$invalidate(22, activeRegion = region); 3038 region.play(); 3039 }); 3040 } 3041 3042 if ($$self.$$.dirty[0] & /*activeRegion, container, leftRegionHandle, rightRegionHandle, trimRegion*/ 31981568) { 3043 if (activeRegion) { 3044 const shadowRoot = container.children[0].shadowRoot; 3045 $$invalidate(24, rightRegionHandle = shadowRoot.querySelector('[data-resize="right"]')); 3046 $$invalidate(23, leftRegionHandle = shadowRoot.querySelector('[data-resize="left"]')); 3047 3048 if (leftRegionHandle && rightRegionHandle) { 3049 leftRegionHandle.setAttribute("role", "button"); 3050 rightRegionHandle.setAttribute("role", "button"); 3051 leftRegionHandle?.setAttribute("aria-label", "Drag to adjust start time"); 3052 rightRegionHandle?.setAttribute("aria-label", "Drag to adjust end time"); 3053 leftRegionHandle?.setAttribute("tabindex", "0"); 3054 rightRegionHandle?.setAttribute("tabindex", "0"); 3055 3056 leftRegionHandle.addEventListener("focus", () => {
3057 if (trimRegion) $$invalidate(25, activeHandle = "left"); 3058 }); 3059 3060 rightRegionHandle.addEventListener("focus", () => { 3061 if (trimRegion) $$invalidate(25, activeHandle = "right"); 3062 }); 3063 } 3064 } 3065 } 3066 3067 if ($$self.$$.dirty[0] & /*trimRegion, activeHandle*/ 35651584) { 3068 trimRegion && window.addEventListener("keydown", e => { 3069 if (e.key === "ArrowLeft") { 3070 adjustRegionHandles(activeHandle, "ArrowLeft"); 3071 } else if (e.key === "ArrowRight") { 3072 adjustRegionHandles(activeHandle, "ArrowRight"); 3073 } 3074 }); 3075 } 3076 }; 3077 3078 return [ 3079 mode, 3080 show_volume_slider, 3081 waveform, 3082 audio_duration, 3083 i18n, 3084 playing, 3085 show_redo, 3086 interactive, 3087 handle_reset_value, 3088 waveform_options, 3089 editable, 3090 playbackSpeed, 3091 currentVolume, 3092 playbackSpeeds, 3093 trimAudio, 3094 clearRegions, 3095 toggleTrimmingMode, 3096 trimDuration, 3097 handle_trim_audio, 3098 container, 3099 trim_region_settings, 3100 trimRegion, 3101 activeRegion, 3102 leftRegionHandle, 3103 rightRegionHandle, 3104 activeHandle, 3105 click_handler, 3106 volumecontrol_currentVolume_binding, 3107 volumecontrol_show_volume_slider_binding, 3108 click_handler_1, 3109 click_handler_2, 3110 click_handler_3, 3111 click_handler_4, 3112 click_handler_5 3113 ]; 3114} 3115 3116class WaveformControls extends SvelteComponent$8 { 3117 constructor(options) { 3118 super(); 3119 3120 init$8( 3121 this, 3122 options, 3123 instance$8, 3124 create_fragment$8, 3125 safe_not_equal$8, 3126 { 3127 waveform: 2, 3128 audio_duration: 3, 3129 i18n: 4, 3130 playing: 5, 3131 show_redo: 6, 3132 interactive: 7, 3133 handle_trim_audio: 18, 3134 mode: 0, 3135 container: 19, 3136 handle_reset_value: 8, 3137 waveform_options: 9, 3138 trim_region_settings: 20, 3139 show_volume_slider: 1, 3140 editable: 10, 3141 trimDuration: 17 3142 }, 3143 null, 3144 [-1, -1] 3145 ); 3146 } 3147} 3148 3149const AudioPlayer_svelte_svelte_type_style_lang = ''; 3150 3151/* home/runner/work/gradio/gradio/js/audio/player/AudioPlayer.svelte generated by Svelte v4.2.2 */ 3152const { 3153 SvelteComponent: SvelteComponent$7, 3154 add_flush_callback: add_flush_callback$5, 3155 append: append$6, 3156 attr: attr$6, 3157 bind: bind$5, 3158 binding_callbacks: binding_callbacks$5, 3159 check_outros: check_outros$4, 3160 create_component: create_component$6, 3161 destroy_component: destroy_component$6, 3162 detach: detach$7, 3163 element: element$6, 3164 empty: empty$4, 3165 group_outros: group_outros$4, 3166 init: init$7, 3167 insert: insert$7, 3168 mount_component: mount_component$6, 3169 noop: noop$2, 3170 safe_not_equal: safe_not_equal$7, 3171 set_data: set_data$4, 3172 space: space$6, 3173 src_url_equal, 3174 text: text$4, 3175 transition_in: transition_in$6, 3176 transition_out: transition_out$6 3177} = window.__gradio__svelte__internal; 3178const { onMount: onMount$2 } = window.__gradio__svelte__internal;const { createEventDispatcher: createEventDispatcher$4 } = window.__gradio__svelte__internal; 3179function create_else_block$6(ctx) { 3180 let div4; 3181 let div1; 3182 let div0; 3183 let t0; 3184 let div3; 3185 let time0; 3186 let t2; 3187 let div2; 3188 let t3; 3189 let time1; 3190 let t5; 3191 let div4_data_testid_value; 3192 let current; 3193 let if_block0 = /*mode*/ ctx[0] === "edit" && /*trimDuration*/ ctx[16] > 0 && create_if_block_3$2(ctx); 3194 let if_block1 = /*waveform*/ ctx[11] && create_if_block_2$3(ctx); 3195 3196 return { 3197 c() { 3198 div4 = element$6("div"); 3199 div1 = element$6("div"); 3200 div0 = element$6("div"); 3201 t0 = space$6(); 3202 div3 = element$6("div"); 3203 time0 = element$6("time"); 3204 time0.textContent = "0:00"; 3205 t2 = space$6(); 3206 div2 = element$6("div"); 3207 if (if_block0) if_block0.c(); 3208 t3 = space$6(); 3209 time1 = element$6("time"); 3210 time1.textContent = "0:00"; 3211 t5 = space$6(); 3212 if (if_block1) if_block1.c(); 3213 attr$6(div0, "id", "waveform"); 3214 attr$6(div0, "class", "svelte-1ark3ru"); 3215 attr$6(div1, "class", "waveform-container svelte-1ark3ru"); 3216 attr$6(time0, "id", "time"); 3217 attr$6(time0, "class", "svelte-1ark3ru"); 3218 attr$6(time1, "id", "duration"); 3219 attr$6(time1, "class", "svelte-1ark3ru"); 3220 attr$6(div3, "class", "timestamps svelte-1ark3ru"); 3221 attr$6(div4, "class", "component-wrapper svelte-1ark3ru"); 3222 3223 attr$6(div4, "data-testid", div4_data_testid_value = /*label*/ ctx[2] 3224 ? "waveform-" + /*label*/ ctx[2] 3225 : "unlabelled-audio"); 3226 }, 3227 m(target, anchor) { 3228 insert$7(target, div4, anchor); 3229 append$6(div4, div1); 3230 append$6(div1, div0); 3231 /*div0_binding*/ ctx[21](div0); 3232 append$6(div4, t0); 3233 append$6(div4, div3);
3234 append$6(div3, time0); 3235 /*time0_binding*/ ctx[22](time0); 3236 append$6(div3, t2); 3237 append$6(div3, div2); 3238 if (if_block0) if_block0.m(div2, null); 3239 append$6(div2, t3); 3240 append$6(div2, time1); 3241 /*time1_binding*/ ctx[23](time1); 3242 append$6(div4, t5); 3243 if (if_block1) if_block1.m(div4, null); 3244 current = true; 3245 }, 3246 p(ctx, dirty) { 3247 if (/*mode*/ ctx[0] === "edit" && /*trimDuration*/ ctx[16] > 0) { 3248 if (if_block0) { 3249 if_block0.p(ctx, dirty); 3250 } else { 3251 if_block0 = create_if_block_3$2(ctx); 3252 if_block0.c(); 3253 if_block0.m(div2, t3); 3254 } 3255 } else if (if_block0) { 3256 if_block0.d(1); 3257 if_block0 = null; 3258 } 3259 3260 if (/*waveform*/ ctx[11]) { 3261 if (if_block1) { 3262 if_block1.p(ctx, dirty); 3263 3264 if (dirty & /*waveform*/ 2048) { 3265 transition_in$6(if_block1, 1); 3266 } 3267 } else { 3268 if_block1 = create_if_block_2$3(ctx); 3269 if_block1.c(); 3270 transition_in$6(if_block1, 1); 3271 if_block1.m(div4, null); 3272 } 3273 } else if (if_block1) { 3274 group_outros$4(); 3275 3276 transition_out$6(if_block1, 1, 1, () => { 3277 if_block1 = null; 3278 }); 3279 3280 check_outros$4(); 3281 } 3282 3283 if (!current || dirty & /*label*/ 4 && div4_data_testid_value !== (div4_data_testid_value = /*label*/ ctx[2] 3284 ? "waveform-" + /*label*/ ctx[2] 3285 : "unlabelled-audio")) { 3286 attr$6(div4, "data-testid", div4_data_testid_value); 3287 } 3288 }, 3289 i(local) { 3290 if (current) return; 3291 transition_in$6(if_block1); 3292 current = true; 3293 }, 3294 o(local) { 3295 transition_out$6(if_block1); 3296 current = false; 3297 }, 3298 d(detaching) { 3299 if (detaching) { 3300 detach$7(div4); 3301 } 3302 3303 /*div0_binding*/ ctx[21](null); 3304 /*time0_binding*/ ctx[22](null); 3305 if (if_block0) if_block0.d(); 3306 /*time1_binding*/ ctx[23](null); 3307 if (if_block1) if_block1.d(); 3308 } 3309 }; 3310} 3311 3312// (111:26) 3313function create_if_block_1$4(ctx) { 3314 let audio; 3315 let audio_src_value; 3316 let audio_autoplay_value; 3317 3318 return { 3319 c() { 3320 audio = element$6("audio"); 3321 attr$6(audio, "class", "standard-player svelte-1ark3ru"); 3322 if (!src_url_equal(audio.src, audio_src_value = /*value*/ ctx[1].url)) attr$6(audio, "src", audio_src_value); 3323 audio.controls = true; 3324 audio.autoplay = audio_autoplay_value = /*waveform_settings*/ ctx[7].autoplay; 3325 }, 3326 m(target, anchor) { 3327 insert$7(target, audio, anchor); 3328 }, 3329 p(ctx, dirty) { 3330 if (dirty & /*value*/ 2 && !src_url_equal(audio.src, audio_src_value = /*value*/ ctx[1].url)) { 3331 attr$6(audio, "src", audio_src_value); 3332 } 3333 3334 if (dirty & /*waveform_settings*/ 128 && audio_autoplay_value !== (audio_autoplay_value = /*waveform_settings*/ ctx[7].autoplay)) { 3335 audio.autoplay = audio_autoplay_value; 3336 } 3337 }, 3338 i: noop$2, 3339 o: noop$2, 3340 d(detaching) { 3341 if (detaching) { 3342 detach$7(audio); 3343 } 3344 } 3345 }; 3346} 3347 3348// (107:0) {#if value === null} 3349function create_if_block$7(ctx) { 3350 let empty_1; 3351 let current; 3352 3353 empty_1 = new Empty({ 3354 props: { 3355 size: "small", 3356 $$slots: { default: [create_default_slot$3] }, 3357 $$scope: { ctx } 3358 } 3359 }); 3360 3361 return { 3362 c() { 3363 create_component$6(empty_1.$$.fragment); 3364 }, 3365 m(target, anchor) { 3366 mount_component$6(empty_1, target, anchor); 3367 current = true; 3368 }, 3369 p(ctx, dirty) { 3370 const empty_1_changes = {}; 3371 3372 if (dirty & /*$$scope*/ 1073741824) { 3373 empty_1_changes.$$scope = { dirty, ctx }; 3374 } 3375 3376 empty_1.$set(empty_1_changes); 3377 }, 3378 i(local) { 3379 if (current) return; 3380 transition_in$6(empty_1.$$.fragment, local); 3381 current = true; 3382 }, 3383 o(local) { 3384 transition_out$6(empty_1.$$.fragment, local); 3385 current = false; 3386 }, 3387 d(detaching) { 3388 destroy_component$6(empty_1, detaching); 3389 } 3390 }; 3391} 3392 3393// (130:4) {#if mode === "edit" && trimDuration > 0} 3394function create_if_block_3$2(ctx) { 3395 let time; 3396 let t_value = format_time(/*trimDuration*/ ctx[16]) + ""; 3397 let t; 3398 3399 return { 3400 c() { 3401 time = element$6("time"); 3402 t = text$4(t_value); 3403 attr$6(time, "id", "trim-duration"); 3404 attr$6(time, "class", "svelte-1ark3ru"); 3405 }, 3406 m(target, anchor) { 3407 insert$7(target, time, anchor); 3408 append$6(time, t); 3409 }, 3410 p(ctx, dirty) { 3411 if (dirty & /*trimDuration*/ 65536 && t_value !== (t_value = format_time(/*trimDuration*/ ctx[16]) + "")) set_data$4(t, t_value); 3412 }, 3413 d(detaching) { 3414 if (detaching) { 3415 detach$7(time); 3416 } 3417 } 3418 }; 3419} 3420 3421// (137:2) {#if waveform} 3422function create_if_block_2$3(ctx) { 3423 let waveformcontrols; 3424 let updating_mode; 3425 let updating_trimDuration; 3426 let updating_show_volume_slider; 3427 let current; 3428 3429 function waveformcontrols_mode_binding(value) { 3430 /*waveformcontrols_mode_binding*/ ctx[24](value); 3431 } 3432 3433 function waveformcontrols_trimDuration_binding(value) { 3434 /*waveformcontrols_trimDuration_binding*/ ctx[25](value); 3435 } 3436 3437 function waveformcontrols_show_volume_slider_binding(value) { 3438 /*waveformcontrols_show_volume_slider_binding*/ ctx[26](value); 3439 } 3440 3441 let waveformcontrols_props = { 3442 container: /*container*/ ctx[10], 3443 waveform: /*waveform*/ ctx[11], 3444 playing: /*playing*/ ctx[14], 3445 audio_duration: /*audio_duration*/ ctx[15], 3446 i18n: /*i18n*/ ctx[3], 3447 interactive: /*interactive*/ ctx[4], 3448 handle_trim_audio: /*handle_trim_audio*/ ctx[18], 3449 show_redo: /*interactive*/ ctx[4], 3450 handle_reset_value: /*handle_reset_value*/ ctx[9], 3451 waveform_options: /*waveform_options*/ ctx[8], 3452 trim_region_settings: /*trim_region_settings*/ ctx[6], 3453 editable: /*editable*/ ctx[5] 3454 }; 3455 3456 if (/*mode*/ ctx[0] !== void 0) { 3457 waveformcontrols_props.mode = /*mode*/ ctx[0]; 3458 } 3459 3460 if (/*trimDuration*/ ctx[16] !== void 0) { 3461 waveformcontrols_props.trimDuration = /*trimDuration*/ ctx[16]; 3462 } 3463 3464 if (/*show_volume_slider*/ ctx[17] !== void 0) { 3465 waveformcontrols_props.show_volume_slider = /*show_volume_slider*/ ctx[17]; 3466 } 3467 3468 waveformcontrols = new WaveformControls({ props: waveformcontrols_props }); 3469 binding_callbacks$5.push(() => bind$5(waveformcontrols, 'mode', waveformcontrols_mode_binding)); 3470 binding_callbacks$5.push(() => bind$5(waveformcontrols, 'trimDuration', waveformcontrols_trimDuration_binding)); 3471 binding_callbacks$5.push(() => bind$5(waveformcontrols, 'show_volume_slider', waveformcontrols_show_volume_slider_binding)); 3472 3473 return { 3474 c() { 3475 create_component$6(waveformcontrols.$$.fragment); 3476 }, 3477 m(target, anchor) { 3478 mount_component$6(waveformcontrols, target, anchor); 3479 current = true; 3480 }, 3481 p(ctx, dirty) { 3482 const waveformcontrols_changes = {};
3483 if (dirty & /*container*/ 1024) waveformcontrols_changes.container = /*container*/ ctx[10]; 3484 if (dirty & /*waveform*/ 2048) waveformcontrols_changes.waveform = /*waveform*/ ctx[11]; 3485 if (dirty & /*playing*/ 16384) waveformcontrols_changes.playing = /*playing*/ ctx[14]; 3486 if (dirty & /*audio_duration*/ 32768) waveformcontrols_changes.audio_duration = /*audio_duration*/ ctx[15]; 3487 if (dirty & /*i18n*/ 8) waveformcontrols_changes.i18n = /*i18n*/ ctx[3]; 3488 if (dirty & /*interactive*/ 16) waveformcontrols_changes.interactive = /*interactive*/ ctx[4]; 3489 if (dirty & /*interactive*/ 16) waveformcontrols_changes.show_redo = /*interactive*/ ctx[4]; 3490 if (dirty & /*handle_reset_value*/ 512) waveformcontrols_changes.handle_reset_value = /*handle_reset_value*/ ctx[9]; 3491 if (dirty & /*waveform_options*/ 256) waveformcontrols_changes.waveform_options = /*waveform_options*/ ctx[8]; 3492 if (dirty & /*trim_region_settings*/ 64) waveformcontrols_changes.trim_region_settings = /*trim_region_settings*/ ctx[6]; 3493 if (dirty & /*editable*/ 32) waveformcontrols_changes.editable = /*editable*/ ctx[5]; 3494 3495 if (!updating_mode && dirty & /*mode*/ 1) { 3496 updating_mode = true; 3497 waveformcontrols_changes.mode = /*mode*/ ctx[0]; 3498 add_flush_callback$5(() => updating_mode = false); 3499 } 3500 3501 if (!updating_trimDuration && dirty & /*trimDuration*/ 65536) { 3502 updating_trimDuration = true; 3503 waveformcontrols_changes.trimDuration = /*trimDuration*/ ctx[16]; 3504 add_flush_callback$5(() => updating_trimDuration = false); 3505 } 3506 3507 if (!updating_show_volume_slider && dirty & /*show_volume_slider*/ 131072) { 3508 updating_show_volume_slider = true; 3509 waveformcontrols_changes.show_volume_slider = /*show_volume_slider*/ ctx[17]; 3510 add_flush_callback$5(() => updating_show_volume_slider = false); 3511 } 3512 3513 waveformcontrols.$set(waveformcontrols_changes); 3514 }, 3515 i(local) { 3516 if (current) return; 3517 transition_in$6(waveformcontrols.$$.fragment, local); 3518 current = true; 3519 }, 3520 o(local) { 3521 transition_out$6(waveformcontrols.$$.fragment, local); 3522 current = false; 3523 }, 3524 d(detaching) { 3525 destroy_component$6(waveformcontrols, detaching); 3526 } 3527 }; 3528} 3529 3530// (108:1) <Empty size="small"> 3531function create_default_slot$3(ctx) { 3532 let music; 3533 let current; 3534 music = new Music({}); 3535 3536 return { 3537 c() { 3538 create_component$6(music.$$.fragment); 3539 }, 3540 m(target, anchor) { 3541 mount_component$6(music, target, anchor); 3542 current = true; 3543 }, 3544 i(local) { 3545 if (current) return; 3546 transition_in$6(music.$$.fragment, local); 3547 current = true; 3548 }, 3549 o(local) { 3550 transition_out$6(music.$$.fragment, local); 3551 current = false; 3552 }, 3553 d(detaching) { 3554 destroy_component$6(music, detaching); 3555 } 3556 }; 3557} 3558 3559function create_fragment$7(ctx) { 3560 let current_block_type_index; 3561 let if_block; 3562 let if_block_anchor; 3563 let current; 3564 const if_block_creators = [create_if_block$7, create_if_block_1$4, create_else_block$6]; 3565 const if_blocks = []; 3566 3567 function select_block_type(ctx, dirty) { 3568 if (/*value*/ ctx[1] === null) return 0; 3569 if (/*value*/ ctx[1].is_stream) return 1; 3570 return 2; 3571 } 3572 3573 current_block_type_index = select_block_type(ctx); 3574 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 3575 3576 return { 3577 c() { 3578 if_block.c(); 3579 if_block_anchor = empty$4(); 3580 }, 3581 m(target, anchor) { 3582 if_blocks[current_block_type_index].m(target, anchor); 3583 insert$7(target, if_block_anchor, anchor); 3584 current = true; 3585 }, 3586 p(ctx, [dirty]) { 3587 let previous_block_index = current_block_type_index; 3588 current_block_type_index = select_block_type(ctx); 3589 3590 if (current_block_type_index === previous_block_index) { 3591 if_blocks[current_block_type_index].p(ctx, dirty); 3592 } else { 3593 group_outros$4(); 3594 3595 transition_out$6(if_blocks[previous_block_index], 1, 1, () => { 3596 if_blocks[previous_block_index] = null; 3597 }); 3598 3599 check_outros$4(); 3600 if_block = if_blocks[current_block_type_index]; 3601 3602 if (!if_block) { 3603 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 3604 if_block.c(); 3605 } else { 3606 if_block.p(ctx, dirty); 3607 } 3608 3609 transition_in$6(if_block, 1); 3610 if_block.m(if_block_anchor.parentNode, if_block_anchor); 3611 } 3612 }, 3613 i(local) { 3614 if (current) return; 3615 transition_in$6(if_block); 3616 current = true; 3617 }, 3618 o(local) { 3619 transition_out$6(if_block); 3620 current = false;
3621 }, 3622 d(detaching) { 3623 if (detaching) { 3624 detach$7(if_block_anchor); 3625 } 3626 3627 if_blocks[current_block_type_index].d(detaching); 3628 } 3629 }; 3630} 3631 3632function instance$7($$self, $$props, $$invalidate) { 3633 let url; 3634 let { value = null } = $$props; 3635 let { label } = $$props; 3636 let { i18n } = $$props; 3637 let { dispatch_blob = () => Promise.resolve() } = $$props; 3638 let { interactive = false } = $$props; 3639 let { editable = true } = $$props; 3640 let { trim_region_settings = {} } = $$props; 3641 let { waveform_settings } = $$props; 3642 let { waveform_options } = $$props; 3643 let { mode = "" } = $$props; 3644 3645 let { handle_reset_value = () => { 3646 3647 } } = $$props; 3648 3649 let container; 3650 let waveform; 3651 let playing = false; 3652 let timeRef; 3653 let durationRef; 3654 let audio_duration; 3655 let trimDuration = 0; 3656 let show_volume_slider = false; 3657 const dispatch = createEventDispatcher$4(); 3658 3659 const create_waveform = () => { 3660 $$invalidate(11, waveform = WaveSurfer.create({ container, ...waveform_settings })); 3661 3662 resolve_wasm_src(value?.url).then(resolved_src => { 3663 if (resolved_src && waveform) { 3664 return waveform.load(resolved_src); 3665 } 3666 }); 3667 }; 3668 3669 const handle_trim_audio = async (start, end) => { 3670 $$invalidate(0, mode = ""); 3671 const decodedData = waveform?.getDecodedData(); 3672 3673 if (decodedData) await process_audio(decodedData, start, end, waveform_settings.sampleRate).then(async trimmedBlob => { 3674 await dispatch_blob([trimmedBlob], "change"); 3675 waveform?.destroy(); 3676 $$invalidate(10, container.innerHTML = "", container); 3677 }); 3678 3679 dispatch("edit"); 3680 }; 3681 3682 async function load_audio(data) { 3683 await resolve_wasm_src(data).then(resolved_src => { 3684 if (!resolved_src || value?.is_stream) return; 3685 return waveform?.load(resolved_src); 3686 }); 3687 } 3688 3689 onMount$2(() => { 3690 window.addEventListener("keydown", e => { 3691 if (!waveform || show_volume_slider) return; 3692 3693 if (e.key === "ArrowRight" && mode !== "edit") { 3694 skip_audio(waveform, 0.1); 3695 } else if (e.key === "ArrowLeft" && mode !== "edit") { 3696 skip_audio(waveform, -0.1); 3697 } 3698 }); 3699 }); 3700 3701 function div0_binding($$value) { 3702 binding_callbacks$5[$$value ? 'unshift' : 'push'](() => { 3703 container = $$value; 3704 ($$invalidate(10, container), $$invalidate(11, waveform)); 3705 }); 3706 } 3707 3708 function time0_binding($$value) { 3709 binding_callbacks$5[$$value ? 'unshift' : 'push'](() => { 3710 timeRef = $$value; 3711 ($$invalidate(12, timeRef), $$invalidate(11, waveform)); 3712 }); 3713 } 3714 3715 function time1_binding($$value) { 3716 binding_callbacks$5[$$value ? 'unshift' : 'push'](() => { 3717 durationRef = $$value; 3718 ($$invalidate(13, durationRef), $$invalidate(11, waveform)); 3719 }); 3720 } 3721 3722 function waveformcontrols_mode_binding(value) { 3723 mode = value; 3724 $$invalidate(0, mode); 3725 } 3726 3727 function waveformcontrols_trimDuration_binding(value) { 3728 trimDuration = value; 3729 $$invalidate(16, trimDuration); 3730 } 3731 3732 function waveformcontrols_show_volume_slider_binding(value) { 3733 show_volume_slider = value; 3734 $$invalidate(17, show_volume_slider); 3735 } 3736 3737 $$self.$$set = $$props => {
3738 if ('value' in $$props) $$invalidate(1, value = $$props.value); 3739 if ('label' in $$props) $$invalidate(2, label = $$props.label); 3740 if ('i18n' in $$props) $$invalidate(3, i18n = $$props.i18n); 3741 if ('dispatch_blob' in $$props) $$invalidate(19, dispatch_blob = $$props.dispatch_blob); 3742 if ('interactive' in $$props) $$invalidate(4, interactive = $$props.interactive); 3743 if ('editable' in $$props) $$invalidate(5, editable = $$props.editable); 3744 if ('trim_region_settings' in $$props) $$invalidate(6, trim_region_settings = $$props.trim_region_settings); 3745 if ('waveform_settings' in $$props) $$invalidate(7, waveform_settings = $$props.waveform_settings); 3746 if ('waveform_options' in $$props) $$invalidate(8, waveform_options = $$props.waveform_options); 3747 if ('mode' in $$props) $$invalidate(0, mode = $$props.mode); 3748 if ('handle_reset_value' in $$props) $$invalidate(9, handle_reset_value = $$props.handle_reset_value); 3749 }; 3750 3751 $$self.$$.update = () => { 3752 if ($$self.$$.dirty & /*value*/ 2) { 3753 $$invalidate(20, url = value?.url); 3754 } 3755 3756 if ($$self.$$.dirty & /*container, waveform*/ 3072) { 3757 if (container !== undefined) { 3758 if (waveform !== undefined) waveform.destroy(); 3759 $$invalidate(10, container.innerHTML = "", container); 3760 create_waveform(); 3761 $$invalidate(14, playing = false); 3762 } 3763 } 3764 3765 if ($$self.$$.dirty & /*waveform, durationRef*/ 10240) { 3766 waveform?.on("decode", duration => { 3767 $$invalidate(15, audio_duration = duration); 3768 durationRef && $$invalidate(13, durationRef.textContent = format_time(duration), durationRef); 3769 }); 3770 } 3771 3772 if ($$self.$$.dirty & /*waveform, timeRef*/ 6144) { 3773 waveform?.on("timeupdate", currentTime => timeRef && $$invalidate(12, timeRef.textContent = format_time(currentTime), timeRef)); 3774 } 3775 3776 if ($$self.$$.dirty & /*waveform, waveform_settings*/ 2176) { 3777 waveform?.on("ready", () => { 3778 if (!waveform_settings.autoplay) { 3779 waveform?.stop(); 3780 } else { 3781 waveform?.play(); 3782 } 3783 }); 3784 } 3785 3786 if ($$self.$$.dirty & /*waveform*/ 2048) { 3787 waveform?.on("finish", () => { 3788 $$invalidate(14, playing = false); 3789 dispatch("stop"); 3790 }); 3791 } 3792 3793 if ($$self.$$.dirty & /*waveform*/ 2048) { 3794 waveform?.on("pause", () => { 3795 $$invalidate(14, playing = false); 3796 dispatch("pause"); 3797 }); 3798 } 3799 3800 if ($$self.$$.dirty & /*waveform*/ 2048) { 3801 waveform?.on("play", () => { 3802 $$invalidate(14, playing = true); 3803 dispatch("play"); 3804 }); 3805 } 3806 3807 if ($$self.$$.dirty & /*url*/ 1048576) { 3808 url && load_audio(url); 3809 } 3810 }; 3811 3812 return [ 3813 mode, 3814 value, 3815 label, 3816 i18n, 3817 interactive, 3818 editable, 3819 trim_region_settings, 3820 waveform_settings, 3821 waveform_options, 3822 handle_reset_value, 3823 container, 3824 waveform, 3825 timeRef, 3826 durationRef, 3827 playing, 3828 audio_duration, 3829 trimDuration, 3830 show_volume_slider, 3831 handle_trim_audio, 3832 dispatch_blob, 3833 url, 3834 div0_binding, 3835 time0_binding, 3836 time1_binding, 3837 waveformcontrols_mode_binding, 3838 waveformcontrols_trimDuration_binding, 3839 waveformcontrols_show_volume_slider_binding 3840 ]; 3841} 3842 3843class AudioPlayer extends SvelteComponent$7 { 3844 constructor(options) { 3845 super(); 3846 3847 init$7(this, options, instance$7, create_fragment$7, safe_not_equal$7, { 3848 value: 1, 3849 label: 2, 3850 i18n: 3, 3851 dispatch_blob: 19, 3852 interactive: 4, 3853 editable: 5, 3854 trim_region_settings: 6, 3855 waveform_settings: 7, 3856 waveform_options: 8, 3857 mode: 0, 3858 handle_reset_value: 9 3859 }); 3860 } 3861} 3862 3863const AudioPlayer$1 = AudioPlayer; 3864 3865const StaticAudio_svelte_svelte_type_style_lang = ''; 3866 3867/* home/runner/work/gradio/gradio/js/audio/static/StaticAudio.svelte generated by Svelte v4.2.2 */ 3868const { 3869 SvelteComponent: SvelteComponent$6, 3870 append: append$5, 3871 attr: attr$5, 3872 bubble: bubble$1, 3873 check_outros: check_outros$3, 3874 create_component: create_component$5, 3875 destroy_component: destroy_component$5, 3876 detach: detach$6, 3877 element: element$5, 3878 empty: empty$3, 3879 group_outros: group_outros$3, 3880 init: init$6, 3881 insert: insert$6, 3882 mount_component: mount_component$5, 3883 safe_not_equal: safe_not_equal$6, 3884 space: space$5, 3885 transition_in: transition_in$5, 3886 transition_out: transition_out$5 3887} = window.__gradio__svelte__internal;const { createEventDispatcher: createEventDispatcher$3 } = window.__gradio__svelte__internal; 3888function create_else_block$5(ctx) { 3889 let empty_1; 3890 let current; 3891 3892 empty_1 = new Empty({ 3893 props: { 3894 size: "small", 3895 $$slots: { default: [create_default_slot_1$1] }, 3896 $$scope: { ctx } 3897 } 3898 }); 3899 3900 return { 3901 c() { 3902 create_component$5(empty_1.$$.fragment); 3903 }, 3904 m(target, anchor) { 3905 mount_component$5(empty_1, target, anchor); 3906 current = true; 3907 }, 3908 p(ctx, dirty) { 3909 const empty_1_changes = {}; 3910
3911 if (dirty & /*$$scope*/ 65536) { 3912 empty_1_changes.$$scope = { dirty, ctx }; 3913 } 3914 3915 empty_1.$set(empty_1_changes); 3916 }, 3917 i(local) { 3918 if (current) return; 3919 transition_in$5(empty_1.$$.fragment, local); 3920 current = true; 3921 }, 3922 o(local) { 3923 transition_out$5(empty_1.$$.fragment, local); 3924 current = false; 3925 }, 3926 d(detaching) { 3927 destroy_component$5(empty_1, detaching); 3928 } 3929 }; 3930} 3931 3932// (28:0) {#if value !== null} 3933function create_if_block$6(ctx) { 3934 let div; 3935 let t0; 3936 let t1; 3937 let audioplayer; 3938 let current; 3939 let if_block0 = /*show_download_button*/ ctx[3] && create_if_block_2$2(ctx); 3940 let if_block1 = /*show_share_button*/ ctx[4] && create_if_block_1$3(ctx); 3941 3942 audioplayer = new AudioPlayer$1({ 3943 props: { 3944 value: /*value*/ ctx[0], 3945 label: /*label*/ ctx[1], 3946 i18n: /*i18n*/ ctx[5], 3947 waveform_settings: /*waveform_settings*/ ctx[6], 3948 waveform_options: /*waveform_options*/ ctx[7], 3949 editable: /*editable*/ ctx[8] 3950 } 3951 }); 3952 3953 audioplayer.$on("pause", /*pause_handler*/ ctx[12]); 3954 audioplayer.$on("play", /*play_handler*/ ctx[13]); 3955 audioplayer.$on("stop", /*stop_handler*/ ctx[14]); 3956 3957 return { 3958 c() { 3959 div = element$5("div"); 3960 if (if_block0) if_block0.c(); 3961 t0 = space$5(); 3962 if (if_block1) if_block1.c(); 3963 t1 = space$5(); 3964 create_component$5(audioplayer.$$.fragment); 3965 attr$5(div, "class", "icon-buttons svelte-rvdo70"); 3966 }, 3967 m(target, anchor) { 3968 insert$6(target, div, anchor); 3969 if (if_block0) if_block0.m(div, null); 3970 append$5(div, t0); 3971 if (if_block1) if_block1.m(div, null); 3972 insert$6(target, t1, anchor); 3973 mount_component$5(audioplayer, target, anchor); 3974 current = true; 3975 }, 3976 p(ctx, dirty) { 3977 if (/*show_download_button*/ ctx[3]) { 3978 if (if_block0) { 3979 if_block0.p(ctx, dirty); 3980 3981 if (dirty & /*show_download_button*/ 8) { 3982 transition_in$5(if_block0, 1); 3983 } 3984 } else { 3985 if_block0 = create_if_block_2$2(ctx); 3986 if_block0.c(); 3987 transition_in$5(if_block0, 1); 3988 if_block0.m(div, t0); 3989 } 3990 } else if (if_block0) { 3991 group_outros$3(); 3992 3993 transition_out$5(if_block0, 1, 1, () => { 3994 if_block0 = null; 3995 }); 3996 3997 check_outros$3(); 3998 } 3999 4000 if (/*show_share_button*/ ctx[4]) { 4001 if (if_block1) { 4002 if_block1.p(ctx, dirty); 4003 4004 if (dirty & /*show_share_button*/ 16) { 4005 transition_in$5(if_block1, 1); 4006 } 4007 } else { 4008 if_block1 = create_if_block_1$3(ctx); 4009 if_block1.c(); 4010 transition_in$5(if_block1, 1); 4011 if_block1.m(div, null); 4012 } 4013 } else if (if_block1) { 4014 group_outros$3(); 4015 4016 transition_out$5(if_block1, 1, 1, () => { 4017 if_block1 = null; 4018 }); 4019 4020 check_outros$3(); 4021 } 4022 4023 const audioplayer_changes = {}; 4024 if (dirty & /*value*/ 1) audioplayer_changes.value = /*value*/ ctx[0]; 4025 if (dirty & /*label*/ 2) audioplayer_changes.label = /*label*/ ctx[1]; 4026 if (dirty & /*i18n*/ 32) audioplayer_changes.i18n = /*i18n*/ ctx[5]; 4027 if (dirty & /*waveform_settings*/ 64) audioplayer_changes.waveform_settings = /*waveform_settings*/ ctx[6]; 4028 if (dirty & /*waveform_options*/ 128) audioplayer_changes.waveform_options = /*waveform_options*/ ctx[7]; 4029 if (dirty & /*editable*/ 256) audioplayer_changes.editable = /*editable*/ ctx[8]; 4030 audioplayer.$set(audioplayer_changes); 4031 }, 4032 i(local) { 4033 if (current) return; 4034 transition_in$5(if_block0); 4035 transition_in$5(if_block1); 4036 transition_in$5(audioplayer.$$.fragment, local); 4037 current = true; 4038 }, 4039 o(local) { 4040 transition_out$5(if_block0); 4041 transition_out$5(if_block1); 4042 transition_out$5(audioplayer.$$.fragment, local); 4043 current = false; 4044 }, 4045 d(detaching) { 4046 if (detaching) { 4047 detach$6(div); 4048 detach$6(t1); 4049 } 4050 4051 if (if_block0) if_block0.d(); 4052 if (if_block1) if_block1.d(); 4053 destroy_component$5(audioplayer, detaching); 4054 } 4055 }; 4056} 4057 4058// (62:1) <Empty size="small"> 4059function create_default_slot_1$1(ctx) { 4060 let music; 4061 let current; 4062 music = new Music({}); 4063 4064 return { 4065 c() { 4066 create_component$5(music.$$.fragment); 4067 }, 4068 m(target, anchor) { 4069 mount_component$5(music, target, anchor); 4070 current = true; 4071 }, 4072 i(local) { 4073 if (current) return; 4074 transition_in$5(music.$$.fragment, local); 4075 current = true; 4076 }, 4077 o(local) { 4078 transition_out$5(music.$$.fragment, local); 4079 current = false;
4080 }, 4081 d(detaching) { 4082 destroy_component$5(music, detaching); 4083 } 4084 }; 4085} 4086 4087// (30:2) {#if show_download_button} 4088function create_if_block_2$2(ctx) { 4089 let downloadlink; 4090 let current; 4091 4092 downloadlink = new DownloadLink({ 4093 props: { 4094 href: /*value*/ ctx[0].url, 4095 download: /*value*/ ctx[0].orig_name || /*value*/ ctx[0].path, 4096 $$slots: { default: [create_default_slot$2] }, 4097 $$scope: { ctx } 4098 } 4099 }); 4100 4101 return { 4102 c() { 4103 create_component$5(downloadlink.$$.fragment); 4104 }, 4105 m(target, anchor) { 4106 mount_component$5(downloadlink, target, anchor); 4107 current = true; 4108 }, 4109 p(ctx, dirty) { 4110 const downloadlink_changes = {}; 4111 if (dirty & /*value*/ 1) downloadlink_changes.href = /*value*/ ctx[0].url; 4112 if (dirty & /*value*/ 1) downloadlink_changes.download = /*value*/ ctx[0].orig_name || /*value*/ ctx[0].path; 4113 4114 if (dirty & /*$$scope, i18n*/ 65568) { 4115 downloadlink_changes.$$scope = { dirty, ctx }; 4116 } 4117 4118 downloadlink.$set(downloadlink_changes); 4119 }, 4120 i(local) { 4121 if (current) return; 4122 transition_in$5(downloadlink.$$.fragment, local); 4123 current = true; 4124 }, 4125 o(local) { 4126 transition_out$5(downloadlink.$$.fragment, local); 4127 current = false; 4128 }, 4129 d(detaching) { 4130 destroy_component$5(downloadlink, detaching); 4131 } 4132 }; 4133} 4134 4135// (31:3) <DownloadLink href={value.url} download={value.orig_name || value.path}> 4136function create_default_slot$2(ctx) { 4137 let iconbutton; 4138 let current; 4139 4140 iconbutton = new IconButton({ 4141 props: { 4142 Icon: Download, 4143 label: /*i18n*/ ctx[5]("common.download") 4144 } 4145 }); 4146 4147 return { 4148 c() { 4149 create_component$5(iconbutton.$$.fragment); 4150 }, 4151 m(target, anchor) { 4152 mount_component$5(iconbutton, target, anchor); 4153 current = true; 4154 }, 4155 p(ctx, dirty) { 4156 const iconbutton_changes = {}; 4157 if (dirty & /*i18n*/ 32) iconbutton_changes.label = /*i18n*/ ctx[5]("common.download"); 4158 iconbutton.$set(iconbutton_changes); 4159 }, 4160 i(local) { 4161 if (current) return; 4162 transition_in$5(iconbutton.$$.fragment, local); 4163 current = true; 4164 }, 4165 o(local) { 4166 transition_out$5(iconbutton.$$.fragment, local); 4167 current = false; 4168 }, 4169 d(detaching) { 4170 destroy_component$5(iconbutton, detaching); 4171 } 4172 }; 4173} 4174 4175// (35:2) {#if show_share_button} 4176function create_if_block_1$3(ctx) { 4177 let sharebutton; 4178 let current; 4179 4180 sharebutton = new ShareButton({ 4181 props: { 4182 i18n: /*i18n*/ ctx[5], 4183 formatter: /*func*/ ctx[9], 4184 value: /*value*/ ctx[0] 4185 } 4186 }); 4187 4188 sharebutton.$on("error", /*error_handler*/ ctx[10]); 4189 sharebutton.$on("share", /*share_handler*/ ctx[11]); 4190 4191 return { 4192 c() { 4193 create_component$5(sharebutton.$$.fragment); 4194 }, 4195 m(target, anchor) { 4196 mount_component$5(sharebutton, target, anchor); 4197 current = true; 4198 }, 4199 p(ctx, dirty) { 4200 const sharebutton_changes = {}; 4201 if (dirty & /*i18n*/ 32) sharebutton_changes.i18n = /*i18n*/ ctx[5]; 4202 if (dirty & /*value*/ 1) sharebutton_changes.value = /*value*/ ctx[0]; 4203 sharebutton.$set(sharebutton_changes); 4204 }, 4205 i(local) { 4206 if (current) return; 4207 transition_in$5(sharebutton.$$.fragment, local); 4208 current = true; 4209 }, 4210 o(local) { 4211 transition_out$5(sharebutton.$$.fragment, local); 4212 current = false; 4213 }, 4214 d(detaching) { 4215 destroy_component$5(sharebutton, detaching); 4216 } 4217 }; 4218} 4219 4220function create_fragment$6(ctx) { 4221 let blocklabel; 4222 let t; 4223 let current_block_type_index; 4224 let if_block; 4225 let if_block_anchor; 4226 let current; 4227 4228 blocklabel = new BlockLabel({ 4229 props: { 4230 show_label: /*show_label*/ ctx[2], 4231 Icon: Music, 4232 float: false, 4233 label: /*label*/ ctx[1] || /*i18n*/ ctx[5]("audio.audio") 4234 } 4235 }); 4236 4237 const if_block_creators = [create_if_block$6, create_else_block$5]; 4238 const if_blocks = []; 4239 4240 function select_block_type(ctx, dirty) { 4241 if (/*value*/ ctx[0] !== null) return 0; 4242 return 1; 4243 } 4244 4245 current_block_type_index = select_block_type(ctx); 4246 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 4247 4248 return { 4249 c() { 4250 create_component$5(blocklabel.$$.fragment); 4251 t = space$5(); 4252 if_block.c(); 4253 if_block_anchor = empty$3(); 4254 }, 4255 m(target, anchor) { 4256 mount_component$5(blocklabel, target, anchor); 4257 insert$6(target, t, anchor); 4258 if_blocks[current_block_type_index].m(target, anchor); 4259 insert$6(target, if_block_anchor, anchor); 4260 current = true; 4261 }, 4262 p(ctx, [dirty]) { 4263 const blocklabel_changes = {};
4264 if (dirty & /*show_label*/ 4) blocklabel_changes.show_label = /*show_label*/ ctx[2]; 4265 if (dirty & /*label, i18n*/ 34) blocklabel_changes.label = /*label*/ ctx[1] || /*i18n*/ ctx[5]("audio.audio"); 4266 blocklabel.$set(blocklabel_changes); 4267 let previous_block_index = current_block_type_index; 4268 current_block_type_index = select_block_type(ctx); 4269 4270 if (current_block_type_index === previous_block_index) { 4271 if_blocks[current_block_type_index].p(ctx, dirty); 4272 } else { 4273 group_outros$3(); 4274 4275 transition_out$5(if_blocks[previous_block_index], 1, 1, () => { 4276 if_blocks[previous_block_index] = null; 4277 }); 4278 4279 check_outros$3(); 4280 if_block = if_blocks[current_block_type_index]; 4281 4282 if (!if_block) { 4283 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 4284 if_block.c(); 4285 } else { 4286 if_block.p(ctx, dirty); 4287 } 4288 4289 transition_in$5(if_block, 1); 4290 if_block.m(if_block_anchor.parentNode, if_block_anchor); 4291 } 4292 }, 4293 i(local) { 4294 if (current) return; 4295 transition_in$5(blocklabel.$$.fragment, local); 4296 transition_in$5(if_block); 4297 current = true; 4298 }, 4299 o(local) { 4300 transition_out$5(blocklabel.$$.fragment, local); 4301 transition_out$5(if_block); 4302 current = false; 4303 }, 4304 d(detaching) { 4305 if (detaching) { 4306 detach$6(t); 4307 detach$6(if_block_anchor); 4308 } 4309 4310 destroy_component$5(blocklabel, detaching); 4311 if_blocks[current_block_type_index].d(detaching); 4312 } 4313 }; 4314} 4315 4316function instance$6($$self, $$props, $$invalidate) { 4317 let { value = null } = $$props; 4318 let { label } = $$props; 4319 let { show_label = true } = $$props; 4320 let { show_download_button = true } = $$props; 4321 let { show_share_button = false } = $$props; 4322 let { i18n } = $$props; 4323 let { waveform_settings } = $$props; 4324 let { waveform_options } = $$props; 4325 let { editable = true } = $$props; 4326 const dispatch = createEventDispatcher$3(); 4327 4328 const func = async value => { 4329 if (!value) return ""; 4330 let url = await uploadToHuggingFace(value.url, "url"); 4331 return `<audio controls src="${url}"></audio>`; 4332 }; 4333 4334 function error_handler(event) { 4335 bubble$1.call(this, $$self, event); 4336 } 4337 4338 function share_handler(event) { 4339 bubble$1.call(this, $$self, event); 4340 } 4341 4342 function pause_handler(event) { 4343 bubble$1.call(this, $$self, event); 4344 } 4345 4346 function play_handler(event) { 4347 bubble$1.call(this, $$self, event); 4348 } 4349 4350 function stop_handler(event) { 4351 bubble$1.call(this, $$self, event); 4352 } 4353 4354 $$self.$$set = $$props => {
4355 if ('value' in $$props) $$invalidate(0, value = $$props.value); 4356 if ('label' in $$props) $$invalidate(1, label = $$props.label); 4357 if ('show_label' in $$props) $$invalidate(2, show_label = $$props.show_label); 4358 if ('show_download_button' in $$props) $$invalidate(3, show_download_button = $$props.show_download_button); 4359 if ('show_share_button' in $$props) $$invalidate(4, show_share_button = $$props.show_share_button); 4360 if ('i18n' in $$props) $$invalidate(5, i18n = $$props.i18n); 4361 if ('waveform_settings' in $$props) $$invalidate(6, waveform_settings = $$props.waveform_settings); 4362 if ('waveform_options' in $$props) $$invalidate(7, waveform_options = $$props.waveform_options); 4363 if ('editable' in $$props) $$invalidate(8, editable = $$props.editable); 4364 }; 4365 4366 $$self.$$.update = () => { 4367 if ($$self.$$.dirty & /*value*/ 1) { 4368 value && dispatch("change", value); 4369 } 4370 }; 4371 4372 return [ 4373 value, 4374 label, 4375 show_label, 4376 show_download_button, 4377 show_share_button, 4378 i18n, 4379 waveform_settings, 4380 waveform_options, 4381 editable, 4382 func, 4383 error_handler, 4384 share_handler, 4385 pause_handler, 4386 play_handler, 4387 stop_handler 4388 ]; 4389} 4390 4391class StaticAudio extends SvelteComponent$6 { 4392 constructor(options) { 4393 super(); 4394 4395 init$6(this, options, instance$6, create_fragment$6, safe_not_equal$6, { 4396 value: 0, 4397 label: 1, 4398 show_label: 2, 4399 show_download_button: 3, 4400 show_share_button: 4, 4401 i18n: 5, 4402 waveform_settings: 6, 4403 waveform_options: 7, 4404 editable: 8 4405 }); 4406 } 4407} 4408 4409const StaticAudio$1 = StaticAudio; 4410 4411function 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=>
4411MediaRecorder.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});this.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();}} 4412 4413const DeviceSelect_svelte_svelte_type_style_lang = ''; 4414 4415/* home/runner/work/gradio/gradio/js/audio/shared/DeviceSelect.svelte generated by Svelte v4.2.2 */ 4416const { 4417 SvelteComponent: SvelteComponent$5, 4418 append: append$4, 4419 attr: attr$4, 4420 destroy_each, 4421 detach: detach$5, 4422 element: element$4, 4423 empty: empty$2, 4424 ensure_array_like, 4425 init: init$5, 4426 insert: insert$5, 4427 noop: noop$1, 4428 safe_not_equal: safe_not_equal$5, 4429 set_data: set_data$3, 4430 set_input_value, 4431 text: text$3 4432} = window.__gradio__svelte__internal;const { createEventDispatcher: createEventDispatcher$2 } = window.__gradio__svelte__internal; 4433function get_each_context(ctx, list, i) { 4434 const child_ctx = ctx.slice(); 4435 child_ctx[3] = list[i]; 4436 return child_ctx; 4437} 4438 4439// (33:1) {:else} 4440function create_else_block$4(ctx) { 4441 let each_1_anchor; 4442 let each_value = ensure_array_like(/*micDevices*/ ctx[0]); 4443 let each_blocks = []; 4444 4445 for (let i = 0; i < each_value.length; i += 1) { 4446 each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); 4447 } 4448 4449 return { 4450 c() { 4451 for (let i = 0; i < each_blocks.length; i += 1) { 4452 each_blocks[i].c(); 4453 } 4454 4455 each_1_anchor = empty$2(); 4456 }, 4457 m(target, anchor) { 4458 for (let i = 0; i < each_blocks.length; i += 1) { 4459 if (each_blocks[i]) { 4460 each_blocks[i].m(target, anchor); 4461 } 4462 } 4463 4464 insert$5(target, each_1_anchor, anchor); 4465 }, 4466 p(ctx, dirty) { 4467 if (dirty & /*micDevices*/ 1) { 4468 each_value = ensure_array_like(/*micDevices*/ ctx[0]); 4469 let i; 4470 4471 for (i = 0; i < each_value.length; i += 1) { 4472 const child_ctx = get_each_context(ctx, each_value, i); 4473 4474 if (each_blocks[i]) { 4475 each_blocks[i].p(child_ctx, dirty); 4476 } else { 4477 each_blocks[i] = create_each_block(child_ctx); 4478 each_blocks[i].c(); 4479 each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor); 4480 } 4481 } 4482 4483 for (; i < each_blocks.length; i += 1) { 4484 each_blocks[i].d(1); 4485 } 4486 4487 each_blocks.length = each_value.length; 4488 } 4489 }, 4490 d(detaching) { 4491 if (detaching) { 4492 detach$5(each_1_anchor); 4493 } 4494 4495 destroy_each(each_blocks, detaching); 4496 } 4497 }; 4498} 4499 4500// (31:1) {#if micDevices.length === 0} 4501function create_if_block$5(ctx) { 4502 let option; 4503 let t_value = /*i18n*/ ctx[1]("audio.no_microphone") + ""; 4504 let t; 4505 4506 return { 4507 c() { 4508 option = element$4("option"); 4509 t = text$3(t_value); 4510 option.__value = ""; 4511 set_input_value(option, option.__value); 4512 }, 4513 m(target, anchor) { 4514 insert$5(target, option, anchor); 4515 append$4(option, t); 4516 }, 4517 p(ctx, dirty) { 4518 if (dirty & /*i18n*/ 2 && t_value !== (t_value = /*i18n*/ ctx[1]("audio.no_microphone") + "")) set_data$3(t, t_value); 4519 }, 4520 d(detaching) { 4521 if (detaching) { 4522 detach$5(option); 4523 } 4524 } 4525 }; 4526} 4527 4528// (34:2) {#each micDevices as micDevice} 4529function create_each_block(ctx) { 4530 let option; 4531 let t_value = /*micDevice*/ ctx[3].label + ""; 4532 let t; 4533 let option_value_value; 4534 4535 return { 4536 c() { 4537 option = element$4("option"); 4538 t = text$3(t_value); 4539 option.__value = option_value_value = /*micDevice*/ ctx[3].deviceId; 4540 set_input_value(option, option.__value); 4541 }, 4542 m(target, anchor) { 4543 insert$5(target, option, anchor); 4544 append$4(option, t); 4545 }, 4546 p(ctx, dirty) {
4547 if (dirty & /*micDevices*/ 1 && t_value !== (t_value = /*micDevice*/ ctx[3].label + "")) set_data$3(t, t_value); 4548 4549 if (dirty & /*micDevices*/ 1 && option_value_value !== (option_value_value = /*micDevice*/ ctx[3].deviceId)) { 4550 option.__value = option_value_value; 4551 set_input_value(option, option.__value); 4552 } 4553 }, 4554 d(detaching) { 4555 if (detaching) { 4556 detach$5(option); 4557 } 4558 } 4559 }; 4560} 4561 4562function create_fragment$5(ctx) { 4563 let select; 4564 let select_disabled_value; 4565 4566 function select_block_type(ctx, dirty) { 4567 if (/*micDevices*/ ctx[0].length === 0) return create_if_block$5; 4568 return create_else_block$4; 4569 } 4570 4571 let current_block_type = select_block_type(ctx); 4572 let if_block = current_block_type(ctx); 4573 4574 return { 4575 c() { 4576 select = element$4("select"); 4577 if_block.c(); 4578 attr$4(select, "class", "mic-select svelte-1v4948z"); 4579 attr$4(select, "aria-label", "Select input device"); 4580 select.disabled = select_disabled_value = /*micDevices*/ ctx[0].length === 0; 4581 }, 4582 m(target, anchor) { 4583 insert$5(target, select, anchor); 4584 if_block.m(select, null); 4585 }, 4586 p(ctx, [dirty]) { 4587 if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) { 4588 if_block.p(ctx, dirty); 4589 } else { 4590 if_block.d(1); 4591 if_block = current_block_type(ctx); 4592 4593 if (if_block) { 4594 if_block.c(); 4595 if_block.m(select, null); 4596 } 4597 } 4598 4599 if (dirty & /*micDevices*/ 1 && select_disabled_value !== (select_disabled_value = /*micDevices*/ ctx[0].length === 0)) { 4600 select.disabled = select_disabled_value; 4601 } 4602 }, 4603 i: noop$1, 4604 o: noop$1, 4605 d(detaching) { 4606 if (detaching) { 4607 detach$5(select); 4608 } 4609 4610 if_block.d(); 4611 } 4612 }; 4613} 4614 4615function instance$5($$self, $$props, $$invalidate) { 4616 let { i18n } = $$props; 4617 let { micDevices = [] } = $$props; 4618 const dispatch = createEventDispatcher$2(); 4619 4620 $$self.$$set = $$props => {
4621 if ('i18n' in $$props) $$invalidate(1, i18n = $$props.i18n); 4622 if ('micDevices' in $$props) $$invalidate(0, micDevices = $$props.micDevices); 4623 }; 4624 4625 $$self.$$.update = () => { 4626 if ($$self.$$.dirty & /*i18n*/ 2) { 4627 try { 4628 let tempDevices = []; 4629 4630 r.getAvailableAudioDevices().then(devices => { 4631 $$invalidate(0, micDevices = devices); 4632 4633 devices.forEach(device => { 4634 if (device.deviceId) { 4635 tempDevices.push(device); 4636 } 4637 }); 4638 4639 $$invalidate(0, micDevices = tempDevices); 4640 }); 4641 } catch(err) { 4642 if (err instanceof DOMException && err.name == "NotAllowedError") { 4643 dispatch("error", i18n("audio.allow_recording_access")); 4644 } 4645 4646 throw err; 4647 } 4648 } 4649 }; 4650 4651 return [micDevices, i18n]; 4652} 4653 4654class DeviceSelect extends SvelteComponent$5 { 4655 constructor(options) { 4656 super(); 4657 init$5(this, options, instance$5, create_fragment$5, safe_not_equal$5, { i18n: 1, micDevices: 0 }); 4658 } 4659} 4660 4661const WaveformRecordControls_svelte_svelte_type_style_lang = ''; 4662 4663/* home/runner/work/gradio/gradio/js/audio/shared/WaveformRecordControls.svelte generated by Svelte v4.2.2 */ 4664const { 4665 SvelteComponent: SvelteComponent$4, 4666 add_flush_callback: add_flush_callback$4, 4667 append: append$3, 4668 attr: attr$3, 4669 bind: bind$4, 4670 binding_callbacks: binding_callbacks$4, 4671 create_component: create_component$4, 4672 destroy_component: destroy_component$4, 4673 detach: detach$4, 4674 element: element$3, 4675 init: init$4, 4676 insert: insert$4, 4677 listen: listen$1, 4678 mount_component: mount_component$4, 4679 run_all, 4680 safe_not_equal: safe_not_equal$4, 4681 set_data: set_data$2, 4682 space: space$4, 4683 text: text$2, 4684 transition_in: transition_in$4, 4685 transition_out: transition_out$4 4686} = window.__gradio__svelte__internal; 4687function create_if_block$4(ctx) { 4688 let time; 4689 let t; 4690 4691 return { 4692 c() { 4693 time = element$3("time"); 4694 t = text$2(/*record_time*/ ctx[2]); 4695 attr$3(time, "class", "duration-button duration svelte-1d9m1oy"); 4696 }, 4697 m(target, anchor) { 4698 insert$4(target, time, anchor); 4699 append$3(time, t); 4700 }, 4701 p(ctx, dirty) { 4702 if (dirty & /*record_time*/ 4) set_data$2(t, /*record_time*/ ctx[2]); 4703 }, 4704 d(detaching) { 4705 if (detaching) { 4706 detach$4(time); 4707 } 4708 } 4709 }; 4710} 4711 4712function create_fragment$4(ctx) { 4713 let div1; 4714 let div0; 4715 let button0; 4716 let t0_value = /*i18n*/ ctx[1]("audio.record") + ""; 4717 let t0; 4718 let t1; 4719 let button1; 4720 let t2_value = /*i18n*/ ctx[1]("audio.stop") + ""; 4721 let t2; 4722 let button1_class_value; 4723 let t3; 4724 let button2; 4725 let t4_value = /*i18n*/ ctx[1]("audio.stop") + ""; 4726 let t4; 4727 let t5; 4728 let button3; 4729 let pause; 4730 let t6; 4731 let button4; 4732 let t7_value = /*i18n*/ ctx[1]("audio.resume") + ""; 4733 let t7; 4734 let t8; 4735 let t9; 4736 let deviceselect; 4737 let updating_micDevices; 4738 let current; 4739 let mounted; 4740 let dispose; 4741 pause = new Pause({}); 4742 let if_block = /*timing*/ ctx[4] && !/*show_recording_waveform*/ ctx[3] && create_if_block$4(ctx); 4743 4744 function deviceselect_micDevices_binding(value) { 4745 /*deviceselect_micDevices_binding*/ ctx[21](value); 4746 } 4747 4748 let deviceselect_props = { i18n: /*i18n*/ ctx[1] }; 4749 4750 if (/*micDevices*/ ctx[5] !== void 0) { 4751 deviceselect_props.micDevices = /*micDevices*/ ctx[5]; 4752 } 4753 4754 deviceselect = new DeviceSelect({ props: deviceselect_props }); 4755 binding_callbacks$4.push(() => bind$4(deviceselect, 'micDevices', deviceselect_micDevices_binding)); 4756 4757 return { 4758 c() { 4759 div1 = element$3("div"); 4760 div0 = element$3("div"); 4761 button0 = element$3("button"); 4762 t0 = text$2(t0_value); 4763 t1 = space$4(); 4764 button1 = element$3("button"); 4765 t2 = text$2(t2_value); 4766 t3 = space$4(); 4767 button2 = element$3("button"); 4768 t4 = text$2(t4_value); 4769 t5 = space$4(); 4770 button3 = element$3("button"); 4771 create_component$4(pause.$$.fragment); 4772 t6 = space$4(); 4773 button4 = element$3("button"); 4774 t7 = text$2(t7_value); 4775 t8 = space$4(); 4776 if (if_block) if_block.c(); 4777 t9 = space$4(); 4778 create_component$4(deviceselect.$$.fragment); 4779 attr$3(button0, "class", "record record-button svelte-1d9m1oy"); 4780 attr$3(button1, "class", button1_class_value = "stop-button " + (/*record*/ ctx[0].isPaused() ? 'stop-button-paused' : '') + " svelte-1d9m1oy"); 4781 attr$3(button2, "id", "stop-paused"); 4782 attr$3(button2, "class", "stop-button-paused svelte-1d9m1oy"); 4783 attr$3(button3, "aria-label", "pause"); 4784 attr$3(button3, "class", "pause-button svelte-1d9m1oy"); 4785 attr$3(button4, "class", "resume-button svelte-1d9m1oy"); 4786 attr$3(div0, "class", "wrapper svelte-1d9m1oy"); 4787 attr$3(div1, "class", "controls svelte-1d9m1oy"); 4788 }, 4789 m(target, anchor) { 4790 insert$4(target, div1, anchor); 4791 append$3(div1, div0); 4792 append$3(div0, button0); 4793 append$3(button0, t0); 4794 /*button0_binding*/ ctx[11](button0); 4795 append$3(div0, t1); 4796 append$3(div0, button1); 4797 append$3(button1, t2); 4798 /*button1_binding*/ ctx[13](button1); 4799 append$3(div0, t3); 4800 append$3(div0, button2); 4801 append$3(button2, t4); 4802 /*button2_binding*/ ctx[15](button2); 4803 append$3(div0, t5); 4804 append$3(div0, button3);
4805 mount_component$4(pause, button3, null); 4806 /*button3_binding*/ ctx[17](button3); 4807 append$3(div0, t6); 4808 append$3(div0, button4); 4809 append$3(button4, t7); 4810 /*button4_binding*/ ctx[19](button4); 4811 append$3(div0, t8); 4812 if (if_block) if_block.m(div0, null); 4813 append$3(div1, t9); 4814 mount_component$4(deviceselect, div1, null); 4815 current = true; 4816 4817 if (!mounted) { 4818 dispose = [ 4819 listen$1(button0, "click", /*click_handler*/ ctx[12]), 4820 listen$1(button1, "click", /*click_handler_1*/ ctx[14]), 4821 listen$1(button2, "click", /*click_handler_2*/ ctx[16]), 4822 listen$1(button3, "click", /*click_handler_3*/ ctx[18]), 4823 listen$1(button4, "click", /*click_handler_4*/ ctx[20]) 4824 ]; 4825 4826 mounted = true; 4827 } 4828 }, 4829 p(ctx, [dirty]) { 4830 if ((!current || dirty & /*i18n*/ 2) && t0_value !== (t0_value = /*i18n*/ ctx[1]("audio.record") + "")) set_data$2(t0, t0_value); 4831 if ((!current || dirty & /*i18n*/ 2) && t2_value !== (t2_value = /*i18n*/ ctx[1]("audio.stop") + "")) set_data$2(t2, t2_value); 4832 4833 if (!current || dirty & /*record*/ 1 && button1_class_value !== (button1_class_value = "stop-button " + (/*record*/ ctx[0].isPaused() ? 'stop-button-paused' : '') + " svelte-1d9m1oy")) { 4834 attr$3(button1, "class", button1_class_value); 4835 } 4836 4837 if ((!current || dirty & /*i18n*/ 2) && t4_value !== (t4_value = /*i18n*/ ctx[1]("audio.stop") + "")) set_data$2(t4, t4_value); 4838 if ((!current || dirty & /*i18n*/ 2) && t7_value !== (t7_value = /*i18n*/ ctx[1]("audio.resume") + "")) set_data$2(t7, t7_value); 4839 4840 if (/*timing*/ ctx[4] && !/*show_recording_waveform*/ ctx[3]) { 4841 if (if_block) { 4842 if_block.p(ctx, dirty); 4843 } else { 4844 if_block = create_if_block$4(ctx); 4845 if_block.c(); 4846 if_block.m(div0, null); 4847 } 4848 } else if (if_block) { 4849 if_block.d(1); 4850 if_block = null; 4851 } 4852 4853 const deviceselect_changes = {}; 4854 if (dirty & /*i18n*/ 2) deviceselect_changes.i18n = /*i18n*/ ctx[1]; 4855 4856 if (!updating_micDevices && dirty & /*micDevices*/ 32) { 4857 updating_micDevices = true; 4858 deviceselect_changes.micDevices = /*micDevices*/ ctx[5]; 4859 add_flush_callback$4(() => updating_micDevices = false); 4860 } 4861 4862 deviceselect.$set(deviceselect_changes); 4863 }, 4864 i(local) { 4865 if (current) return; 4866 transition_in$4(pause.$$.fragment, local); 4867 transition_in$4(deviceselect.$$.fragment, local); 4868 current = true; 4869 }, 4870 o(local) { 4871 transition_out$4(pause.$$.fragment, local); 4872 transition_out$4(deviceselect.$$.fragment, local); 4873 current = false; 4874 }, 4875 d(detaching) { 4876 if (detaching) { 4877 detach$4(div1); 4878 } 4879 4880 /*button0_binding*/ ctx[11](null); 4881 /*button1_binding*/ ctx[13](null); 4882 /*button2_binding*/ ctx[15](null); 4883 destroy_component$4(pause); 4884 /*button3_binding*/ ctx[17](null); 4885 /*button4_binding*/ ctx[19](null); 4886 if (if_block) if_block.d(); 4887 destroy_component$4(deviceselect); 4888 mounted = false; 4889 run_all(dispose); 4890 } 4891 }; 4892} 4893 4894function instance$4($$self, $$props, $$invalidate) { 4895 let { record } = $$props; 4896 let { i18n } = $$props; 4897 let micDevices = []; 4898 let recordButton; 4899 let pauseButton; 4900 let resumeButton; 4901 let stopButton; 4902 let stopButtonPaused; 4903 let { record_time } = $$props; 4904 let { show_recording_waveform } = $$props; 4905 let { timing = false } = $$props; 4906 4907 function button0_binding($$value) { 4908 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4909 recordButton = $$value; 4910 ($$invalidate(6, recordButton), $$invalidate(0, record)); 4911 }); 4912 } 4913 4914 const click_handler = () => record.startRecording(); 4915 4916 function button1_binding($$value) { 4917 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4918 stopButton = $$value; 4919 ($$invalidate(9, stopButton), $$invalidate(0, record)); 4920 }); 4921 } 4922 4923 const click_handler_1 = () => { 4924 if (record.isPaused()) { 4925 record.resumeRecording(); 4926 record.stopRecording(); 4927 } 4928 4929 record.stopRecording(); 4930 }; 4931 4932 function button2_binding($$value) { 4933 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4934 stopButtonPaused = $$value; 4935 ($$invalidate(10, stopButtonPaused), $$invalidate(0, record)); 4936 }); 4937 } 4938 4939 const click_handler_2 = () => { 4940 if (record.isPaused()) { 4941 record.resumeRecording(); 4942 record.stopRecording(); 4943 } 4944 4945 record.stopRecording(); 4946 }; 4947 4948 function button3_binding($$value) { 4949 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4950 pauseButton = $$value;
4951 ($$invalidate(7, pauseButton), $$invalidate(0, record)); 4952 }); 4953 } 4954 4955 const click_handler_3 = () => record.pauseRecording(); 4956 4957 function button4_binding($$value) { 4958 binding_callbacks$4[$$value ? 'unshift' : 'push'](() => { 4959 resumeButton = $$value; 4960 ($$invalidate(8, resumeButton), $$invalidate(0, record)); 4961 }); 4962 } 4963 4964 const click_handler_4 = () => record.resumeRecording(); 4965 4966 function deviceselect_micDevices_binding(value) { 4967 micDevices = value; 4968 $$invalidate(5, micDevices); 4969 } 4970 4971 $$self.$$set = $$props => { 4972 if ('record' in $$props) $$invalidate(0, record = $$props.record); 4973 if ('i18n' in $$props) $$invalidate(1, i18n = $$props.i18n); 4974 if ('record_time' in $$props) $$invalidate(2, record_time = $$props.record_time); 4975 if ('show_recording_waveform' in $$props) $$invalidate(3, show_recording_waveform = $$props.show_recording_waveform); 4976 if ('timing' in $$props) $$invalidate(4, timing = $$props.timing); 4977 }; 4978 4979 $$self.$$.update = () => { 4980 if ($$self.$$.dirty & /*record*/ 1) { 4981 record.on("record-start", () => { 4982 record.startMic(); 4983 $$invalidate(6, recordButton.style.display = "none", recordButton); 4984 $$invalidate(9, stopButton.style.display = "flex", stopButton); 4985 $$invalidate(7, pauseButton.style.display = "block", pauseButton); 4986 }); 4987 } 4988 4989 if ($$self.$$.dirty & /*record*/ 1) { 4990 record.on("record-end", () => { 4991 if (record.isPaused()) { 4992 record.resumeRecording(); 4993 record.stopRecording(); 4994 } 4995 4996 record.stopMic(); 4997 $$invalidate(6, recordButton.style.display = "flex", recordButton); 4998 $$invalidate(9, stopButton.style.display = "none", stopButton); 4999 $$invalidate(7, pauseButton.style.display = "none", pauseButton); 5000 $$invalidate(6, recordButton.disabled = false, recordButton); 5001 }); 5002 } 5003 5004 if ($$self.$$.dirty & /*record*/ 1) { 5005 record.on("record-pause", () => { 5006 $$invalidate(7, pauseButton.style.display = "none", pauseButton); 5007 $$invalidate(8, resumeButton.style.display = "block", resumeButton); 5008 $$invalidate(9, stopButton.style.display = "none", stopButton); 5009 $$invalidate(10, stopButtonPaused.style.display = "flex", stopButtonPaused); 5010 }); 5011 } 5012 5013 if ($$self.$$.dirty & /*record*/ 1) { 5014 record.on("record-resume", () => { 5015 $$invalidate(7, pauseButton.style.display = "block", pauseButton); 5016 $$invalidate(8, resumeButton.style.display = "none", resumeButton); 5017 $$invalidate(6, recordButton.style.display = "none", recordButton); 5018 $$invalidate(9, stopButton.style.display = "flex", stopButton); 5019 $$invalidate(10, stopButtonPaused.style.display = "none", stopButtonPaused); 5020 }); 5021 } 5022 }; 5023 5024 return [ 5025 record, 5026 i18n, 5027 record_time, 5028 show_recording_waveform, 5029 timing, 5030 micDevices, 5031 recordButton, 5032 pauseButton, 5033 resumeButton, 5034 stopButton, 5035 stopButtonPaused, 5036 button0_binding, 5037 click_handler, 5038 button1_binding, 5039 click_handler_1, 5040 button2_binding, 5041 click_handler_2, 5042 button3_binding, 5043 click_handler_3, 5044 button4_binding, 5045 click_handler_4, 5046 deviceselect_micDevices_binding 5047 ]; 5048} 5049 5050class WaveformRecordControls extends SvelteComponent$4 { 5051 constructor(options) { 5052 super(); 5053 5054 init$4(this, options, instance$4, create_fragment$4, safe_not_equal$4, { 5055 record: 0, 5056 i18n: 1, 5057 record_time: 2, 5058 show_recording_waveform: 3, 5059 timing: 4 5060 }); 5061 } 5062} 5063 5064const AudioRecorder_svelte_svelte_type_style_lang = ''; 5065 5066/* home/runner/work/gradio/gradio/js/audio/recorder/AudioRecorder.svelte generated by Svelte v4.2.2 */ 5067const { 5068 SvelteComponent: SvelteComponent$3, 5069 add_flush_callback: add_flush_callback$3, 5070 append: append$2, 5071 attr: attr$2, 5072 bind: bind$3, 5073 binding_callbacks: binding_callbacks$3, 5074 check_outros: check_outros$2, 5075 create_component: create_component$3, 5076 destroy_component: destroy_component$3, 5077 detach: detach$3, 5078 element: element$2, 5079 group_outros: group_outros$2, 5080 init: init$3, 5081 insert: insert$3, 5082 mount_component: mount_component$3, 5083 noop, 5084 safe_not_equal: safe_not_equal$3, 5085 set_data: set_data$1, 5086 space: space$3, 5087 text: text$1, 5088 transition_in: transition_in$3, 5089 transition_out: transition_out$3 5090} = window.__gradio__svelte__internal; 5091const { onMount: onMount$1 } = window.__gradio__svelte__internal;const { createEventDispatcher: createEventDispatcher$1 } = window.__gradio__svelte__internal; 5092function create_if_block_2$1(ctx) { 5093 let div1; 5094 let time; 5095 let t1; 5096 let div0; 5097 let t2; 5098 let if_block0 = /*mode*/ ctx[0] === "edit" && /*trimDuration*/ ctx[16] > 0 && create_if_block_4(ctx); 5099 5100 function select_block_type(ctx, dirty) { 5101 if (/*timing*/ ctx[15]) return create_if_block_3$1; 5102 return create_else_block$3; 5103 } 5104 5105 let current_block_type = select_block_type(ctx); 5106 let if_block1 = current_block_type(ctx); 5107 5108 return { 5109 c() { 5110 div1 = element$2("div"); 5111 time = element$2("time"); 5112 time.textContent = "0:00"; 5113 t1 = space$3(); 5114 div0 = element$2("div"); 5115 if (if_block0) if_block0.c(); 5116 t2 = space$3(); 5117 if_block1.c(); 5118 attr$2(time, "class", "time svelte-9n45fh"); 5119 attr$2(div1, "class", "timestamps svelte-9n45fh"); 5120 }, 5121 m(target, anchor) { 5122 insert$3(target, div1, anchor); 5123 append$2(div1, time); 5124 /*time_binding*/ ctx[23](time); 5125 append$2(div1, t1); 5126 append$2(div1, div0); 5127 if (if_block0) if_block0.m(div0, null); 5128 append$2(div0, t2); 5129 if_block1.m(div0, null); 5130 }, 5131 p(ctx, dirty) { 5132 if (/*mode*/ ctx[0] === "edit" && /*trimDuration*/ ctx[16] > 0) { 5133 if (if_block0) { 5134 if_block0.p(ctx, dirty); 5135 } else { 5136 if_block0 = create_if_block_4(ctx); 5137 if_block0.c(); 5138 if_block0.m(div0, t2); 5139 } 5140 } else if (if_block0) { 5141 if_block0.d(1); 5142 if_block0 = null; 5143 } 5144 5145 if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block1) { 5146 if_block1.p(ctx, dirty); 5147 } else { 5148 if_block1.d(1); 5149 if_block1 = current_block_type(ctx); 5150 5151 if (if_block1) { 5152 if_block1.c(); 5153 if_block1.m(div0, null); 5154 } 5155 } 5156 }, 5157 d(detaching) { 5158 if (detaching) { 5159 detach$3(div1); 5160 } 5161 5162 /*time_binding*/ ctx[23](null); 5163 if (if_block0) if_block0.d(); 5164 if_block1.d(); 5165 } 5166 }; 5167} 5168 5169// (169:4) {#if mode === "edit" && trimDuration > 0} 5170function create_if_block_4(ctx) { 5171 let time; 5172 let t_value = format_time(/*trimDuration*/ ctx[16]) + ""; 5173 let t; 5174 5175 return { 5176 c() { 5177 time = element$2("time"); 5178 t = text$1(t_value); 5179 attr$2(time, "class", "trim-duration svelte-9n45fh"); 5180 }, 5181 m(target, anchor) {
5182 insert$3(target, time, anchor); 5183 append$2(time, t); 5184 }, 5185 p(ctx, dirty) { 5186 if (dirty[0] & /*trimDuration*/ 65536 && t_value !== (t_value = format_time(/*trimDuration*/ ctx[16]) + "")) set_data$1(t, t_value); 5187 }, 5188 d(detaching) { 5189 if (detaching) { 5190 detach$3(time); 5191 } 5192 } 5193 }; 5194} 5195 5196// (174:4) {:else} 5197function create_else_block$3(ctx) { 5198 let time; 5199 5200 return { 5201 c() { 5202 time = element$2("time"); 5203 time.textContent = "0:00"; 5204 attr$2(time, "class", "duration svelte-9n45fh"); 5205 }, 5206 m(target, anchor) { 5207 insert$3(target, time, anchor); 5208 /*time_binding_1*/ ctx[24](time); 5209 }, 5210 p: noop, 5211 d(detaching) { 5212 if (detaching) { 5213 detach$3(time); 5214 } 5215 5216 /*time_binding_1*/ ctx[24](null); 5217 } 5218 }; 5219} 5220 5221// (172:4) {#if timing} 5222function create_if_block_3$1(ctx) { 5223 let time; 5224 let t_value = format_time(/*seconds*/ ctx[14]) + ""; 5225 let t; 5226 5227 return { 5228 c() { 5229 time = element$2("time"); 5230 t = text$1(t_value); 5231 attr$2(time, "class", "duration svelte-9n45fh"); 5232 }, 5233 m(target, anchor) { 5234 insert$3(target, time, anchor); 5235 append$2(time, t); 5236 }, 5237 p(ctx, dirty) { 5238 if (dirty[0] & /*seconds*/ 16384 && t_value !== (t_value = format_time(/*seconds*/ ctx[14]) + "")) set_data$1(t, t_value); 5239 }, 5240 d(detaching) { 5241 if (detaching) { 5242 detach$3(time); 5243 } 5244 } 5245 }; 5246} 5247 5248// (181:1) {#if microphoneContainer && !recordedAudio} 5249function create_if_block_1$2(ctx) { 5250 let waveformrecordcontrols; 5251 let updating_record; 5252 let current; 5253 5254 function waveformrecordcontrols_record_binding(value) { 5255 /*waveformrecordcontrols_record_binding*/ ctx[25](value); 5256 } 5257 5258 let waveformrecordcontrols_props = { 5259 i18n: /*i18n*/ ctx[1], 5260 timing: /*timing*/ ctx[15], 5261 show_recording_waveform: /*waveform_options*/ ctx[2].show_recording_waveform, 5262 record_time: format_time(/*seconds*/ ctx[14]) 5263 }; 5264 5265 if (/*record*/ ctx[8] !== void 0) { 5266 waveformrecordcontrols_props.record = /*record*/ ctx[8]; 5267 } 5268 5269 waveformrecordcontrols = new WaveformRecordControls({ props: waveformrecordcontrols_props }); 5270 binding_callbacks$3.push(() => bind$3(waveformrecordcontrols, 'record', waveformrecordcontrols_record_binding)); 5271 5272 return { 5273 c() { 5274 create_component$3(waveformrecordcontrols.$$.fragment); 5275 }, 5276 m(target, anchor) { 5277 mount_component$3(waveformrecordcontrols, target, anchor); 5278 current = true; 5279 }, 5280 p(ctx, dirty) { 5281 const waveformrecordcontrols_changes = {}; 5282 if (dirty[0] & /*i18n*/ 2) waveformrecordcontrols_changes.i18n = /*i18n*/ ctx[1]; 5283 if (dirty[0] & /*timing*/ 32768) waveformrecordcontrols_changes.timing = /*timing*/ ctx[15]; 5284 if (dirty[0] & /*waveform_options*/ 4) waveformrecordcontrols_changes.show_recording_waveform = /*waveform_options*/ ctx[2].show_recording_waveform; 5285 if (dirty[0] & /*seconds*/ 16384) waveformrecordcontrols_changes.record_time = format_time(/*seconds*/ ctx[14]); 5286 5287 if (!updating_record && dirty[0] & /*record*/ 256) { 5288 updating_record = true; 5289 waveformrecordcontrols_changes.record = /*record*/ ctx[8]; 5290 add_flush_callback$3(() => updating_record = false); 5291 } 5292 5293 waveformrecordcontrols.$set(waveformrecordcontrols_changes); 5294 }, 5295 i(local) { 5296 if (current) return; 5297 transition_in$3(waveformrecordcontrols.$$.fragment, local); 5298 current = true; 5299 }, 5300 o(local) { 5301 transition_out$3(waveformrecordcontrols.$$.fragment, local); 5302 current = false; 5303 }, 5304 d(detaching) { 5305 destroy_component$3(waveformrecordcontrols, detaching); 5306 } 5307 }; 5308} 5309 5310// (191:1) {#if recordingWaveform && recordedAudio} 5311function create_if_block$3(ctx) { 5312 let waveformcontrols; 5313 let updating_waveform; 5314 let updating_trimDuration; 5315 let updating_mode; 5316 let current; 5317 5318 function waveformcontrols_waveform_binding(value) { 5319 /*waveformcontrols_waveform_binding*/ ctx[26](value); 5320 } 5321 5322 function waveformcontrols_trimDuration_binding(value) { 5323 /*waveformcontrols_trimDuration_binding*/ ctx[27](value); 5324 } 5325 5326 function waveformcontrols_mode_binding(value) { 5327 /*waveformcontrols_mode_binding*/ ctx[28](value); 5328 } 5329 5330 let waveformcontrols_props = { 5331 container: /*recordingContainer*/ ctx[6], 5332 playing: /*playing*/ ctx[12], 5333 audio_duration: /*audio_duration*/ ctx[13], 5334 i18n: /*i18n*/ ctx[1], 5335 editable: /*editable*/ ctx[4], 5336 interactive: true, 5337 handle_trim_audio: /*handle_trim_audio*/ ctx[17], 5338 show_redo: true, 5339 handle_reset_value: /*handle_reset_value*/ ctx[3], 5340 waveform_options: /*waveform_options*/ ctx[2] 5341 }; 5342 5343 if (/*recordingWaveform*/ ctx[5] !== void 0) { 5344 waveformcontrols_props.waveform = /*recordingWaveform*/ ctx[5]; 5345 } 5346 5347 if (/*trimDuration*/ ctx[16] !== void 0) { 5348 waveformcontrols_props.trimDuration = /*trimDuration*/ ctx[16]; 5349 } 5350 5351 if (/*mode*/ ctx[0] !== void 0) { 5352 waveformcontrols_props.mode = /*mode*/ ctx[0]; 5353 } 5354 5355 waveformcontrols = new WaveformControls({ props: waveformcontrols_props }); 5356 binding_callbacks$3.push(() => bind$3(waveformcontrols, 'waveform', waveformcontrols_waveform_binding)); 5357 binding_callbacks$3.push(() => bind$3(waveformcontrols, 'trimDuration', waveformcontrols_trimDuration_binding)); 5358 binding_callbacks$3.push(() => bind$3(waveformcontrols, 'mode', waveformcontrols_mode_binding)); 5359 5360 return { 5361 c() { 5362 create_component$3(waveformcontrols.$$.fragment); 5363 }, 5364 m(target, anchor) { 5365 mount_component$3(waveformcontrols, target, anchor); 5366 current = true; 5367 }, 5368 p(ctx, dirty) { 5369 const waveformcontrols_changes = {};
5370 if (dirty[0] & /*recordingContainer*/ 64) waveformcontrols_changes.container = /*recordingContainer*/ ctx[6]; 5371 if (dirty[0] & /*playing*/ 4096) waveformcontrols_changes.playing = /*playing*/ ctx[12]; 5372 if (dirty[0] & /*audio_duration*/ 8192) waveformcontrols_changes.audio_duration = /*audio_duration*/ ctx[13]; 5373 if (dirty[0] & /*i18n*/ 2) waveformcontrols_changes.i18n = /*i18n*/ ctx[1]; 5374 if (dirty[0] & /*editable*/ 16) waveformcontrols_changes.editable = /*editable*/ ctx[4]; 5375 if (dirty[0] & /*handle_reset_value*/ 8) waveformcontrols_changes.handle_reset_value = /*handle_reset_value*/ ctx[3]; 5376 if (dirty[0] & /*waveform_options*/ 4) waveformcontrols_changes.waveform_options = /*waveform_options*/ ctx[2]; 5377 5378 if (!updating_waveform && dirty[0] & /*recordingWaveform*/ 32) { 5379 updating_waveform = true; 5380 waveformcontrols_changes.waveform = /*recordingWaveform*/ ctx[5]; 5381 add_flush_callback$3(() => updating_waveform = false); 5382 } 5383 5384 if (!updating_trimDuration && dirty[0] & /*trimDuration*/ 65536) { 5385 updating_trimDuration = true; 5386 waveformcontrols_changes.trimDuration = /*trimDuration*/ ctx[16]; 5387 add_flush_callback$3(() => updating_trimDuration = false); 5388 } 5389 5390 if (!updating_mode && dirty[0] & /*mode*/ 1) { 5391 updating_mode = true; 5392 waveformcontrols_changes.mode = /*mode*/ ctx[0]; 5393 add_flush_callback$3(() => updating_mode = false); 5394 } 5395 5396 waveformcontrols.$set(waveformcontrols_changes); 5397 }, 5398 i(local) { 5399 if (current) return; 5400 transition_in$3(waveformcontrols.$$.fragment, local); 5401 current = true; 5402 }, 5403 o(local) { 5404 transition_out$3(waveformcontrols.$$.fragment, local); 5405 current = false; 5406 }, 5407 d(detaching) { 5408 destroy_component$3(waveformcontrols, detaching); 5409 } 5410 }; 5411} 5412 5413function create_fragment$3(ctx) { 5414 let div2; 5415 let div0; 5416 let t0; 5417 let div1; 5418 let t1; 5419 let t2; 5420 let t3; 5421 let current; 5422 let if_block0 = (/*timing*/ ctx[15] || /*recordedAudio*/ ctx[9]) && /*waveform_options*/ ctx[2].show_recording_waveform && create_if_block_2$1(ctx); 5423 let if_block1 = /*microphoneContainer*/ ctx[7] && !/*recordedAudio*/ ctx[9] && create_if_block_1$2(ctx); 5424 let if_block2 = /*recordingWaveform*/ ctx[5] && /*recordedAudio*/ ctx[9] && create_if_block$3(ctx); 5425 5426 return { 5427 c() { 5428 div2 = element$2("div"); 5429 div0 = element$2("div"); 5430 t0 = space$3(); 5431 div1 = element$2("div"); 5432 t1 = space$3(); 5433 if (if_block0) if_block0.c(); 5434 t2 = space$3(); 5435 if (if_block1) if_block1.c(); 5436 t3 = space$3(); 5437 if (if_block2) if_block2.c(); 5438 attr$2(div0, "class", "microphone svelte-9n45fh"); 5439 attr$2(div0, "data-testid", "microphone-waveform"); 5440 attr$2(div1, "data-testid", "recording-waveform"); 5441 attr$2(div2, "class", "component-wrapper svelte-9n45fh"); 5442 }, 5443 m(target, anchor) { 5444 insert$3(target, div2, anchor); 5445 append$2(div2, div0); 5446 /*div0_binding*/ ctx[21](div0); 5447 append$2(div2, t0); 5448 append$2(div2, div1); 5449 /*div1_binding*/ ctx[22](div1); 5450 append$2(div2, t1); 5451 if (if_block0) if_block0.m(div2, null); 5452 append$2(div2, t2); 5453 if (if_block1) if_block1.m(div2, null); 5454 append$2(div2, t3); 5455 if (if_block2) if_block2.m(div2, null); 5456 current = true; 5457 }, 5458 p(ctx, dirty) { 5459 if ((/*timing*/ ctx[15] || /*recordedAudio*/ ctx[9]) && /*waveform_options*/ ctx[2].show_recording_waveform) { 5460 if (if_block0) { 5461 if_block0.p(ctx, dirty); 5462 } else { 5463 if_block0 = create_if_block_2$1(ctx); 5464 if_block0.c(); 5465 if_block0.m(div2, t2); 5466 } 5467 } else if (if_block0) { 5468 if_block0.d(1); 5469 if_block0 = null; 5470 } 5471 5472 if (/*microphoneContainer*/ ctx[7] && !/*recordedAudio*/ ctx[9]) { 5473 if (if_block1) { 5474 if_block1.p(ctx, dirty); 5475 5476 if (dirty[0] & /*microphoneContainer, recordedAudio*/ 640) { 5477 transition_in$3(if_block1, 1); 5478 } 5479 } else { 5480 if_block1 = create_if_block_1$2(ctx); 5481 if_block1.c(); 5482 transition_in$3(if_block1, 1); 5483 if_block1.m(div2, t3); 5484 } 5485 } else if (if_block1) { 5486 group_outros$2(); 5487 5488 transition_out$3(if_block1, 1, 1, () => { 5489 if_block1 = null; 5490 }); 5491 5492 check_outros$2(); 5493 } 5494 5495 if (/*recordingWaveform*/ ctx[5] && /*recordedAudio*/ ctx[9]) { 5496 if (if_block2) { 5497 if_block2.p(ctx, dirty); 5498
5499 if (dirty[0] & /*recordingWaveform, recordedAudio*/ 544) { 5500 transition_in$3(if_block2, 1); 5501 } 5502 } else { 5503 if_block2 = create_if_block$3(ctx); 5504 if_block2.c(); 5505 transition_in$3(if_block2, 1); 5506 if_block2.m(div2, null); 5507 } 5508 } else if (if_block2) { 5509 group_outros$2(); 5510 5511 transition_out$3(if_block2, 1, 1, () => { 5512 if_block2 = null; 5513 }); 5514 5515 check_outros$2(); 5516 } 5517 }, 5518 i(local) { 5519 if (current) return; 5520 transition_in$3(if_block1); 5521 transition_in$3(if_block2); 5522 current = true; 5523 }, 5524 o(local) { 5525 transition_out$3(if_block1); 5526 transition_out$3(if_block2); 5527 current = false; 5528 }, 5529 d(detaching) { 5530 if (detaching) { 5531 detach$3(div2); 5532 } 5533 5534 /*div0_binding*/ ctx[21](null); 5535 /*div1_binding*/ ctx[22](null); 5536 if (if_block0) if_block0.d(); 5537 if (if_block1) if_block1.d(); 5538 if (if_block2) if_block2.d(); 5539 } 5540 }; 5541} 5542 5543function instance$3($$self, $$props, $$invalidate) { 5544 let { mode } = $$props; 5545 let { i18n } = $$props; 5546 let { dispatch_blob } = $$props; 5547 let { waveform_settings } = $$props; 5548 let { waveform_options = { show_recording_waveform: true } } = $$props; 5549 let { handle_reset_value } = $$props; 5550 let { editable = true } = $$props; 5551 let micWaveform; 5552 let recordingWaveform; 5553 let playing = false; 5554 let recordingContainer; 5555 let microphoneContainer; 5556 let record; 5557 let recordedAudio = null; 5558 5559 // timestamps 5560 let timeRef; 5561 5562 let durationRef; 5563 let audio_duration; 5564 let seconds = 0; 5565 let interval; 5566 let timing = false; 5567 5568 // trimming 5569 let trimDuration = 0; 5570 5571 const start_interval = () => { 5572 clearInterval(interval); 5573 5574 $$invalidate(20, interval = setInterval( 5575 () => { 5576 $$invalidate(14, seconds++, seconds); 5577 }, 5578 1000 5579 )); 5580 }; 5581 5582 const dispatch = createEventDispatcher$1(); 5583 5584 const create_mic_waveform = () => { 5585 if (microphoneContainer) $$invalidate(7, microphoneContainer.innerHTML = "", microphoneContainer); 5586 if (micWaveform !== undefined) micWaveform.destroy(); 5587 if (!microphoneContainer) return; 5588 5589 micWaveform = WaveSurfer.create({ 5590 ...waveform_settings, 5591 normalize: false, 5592 container: microphoneContainer 5593 }); 5594 5595 $$invalidate(8, record = micWaveform.registerPlugin(r.create())); 5596 record.startMic(); 5597 }; 5598 5599 const create_recording_waveform = () => { 5600 let recording = recordingContainer; 5601 if (!recordedAudio || !recording) return; 5602 5603 $$invalidate(5, recordingWaveform = WaveSurfer.create({ 5604 container: recording, 5605 url: recordedAudio, 5606 ...waveform_settings 5607 })); 5608 }; 5609 5610 const handle_trim_audio = async (start, end) => { 5611 $$invalidate(0, mode = "edit"); 5612 const decodedData = recordingWaveform.getDecodedData(); 5613 5614 if (decodedData) await process_audio(decodedData, start, end).then(async trimmedAudio => { 5615 await dispatch_blob([trimmedAudio], "change"); 5616 await dispatch_blob([trimmedAudio], "stop_recording"); 5617 recordingWaveform.destroy(); 5618 create_recording_waveform(); 5619 }); 5620 5621 dispatch("edit"); 5622 }; 5623 5624 onMount$1(() => { 5625 create_mic_waveform(); 5626 5627 window.addEventListener("keydown", e => { 5628 if (e.key === "ArrowRight") { 5629 skip_audio(recordingWaveform, 0.1); 5630 } else if (e.key === "ArrowLeft") { 5631 skip_audio(recordingWaveform, -0.1); 5632 } 5633 }); 5634 }); 5635 5636 function div0_binding($$value) { 5637 binding_callbacks$3[$$value ? 'unshift' : 'push'](() => { 5638 microphoneContainer = $$value; 5639 $$invalidate(7, microphoneContainer); 5640 }); 5641 } 5642 5643 function div1_binding($$value) { 5644 binding_callbacks$3[$$value ? 'unshift' : 'push'](() => { 5645 recordingContainer = $$value; 5646 $$invalidate(6, recordingContainer); 5647 }); 5648 } 5649 5650 function time_binding($$value) { 5651 binding_callbacks$3[$$value ? 'unshift' : 'push'](() => { 5652 timeRef = $$value; 5653 ($$invalidate(10, timeRef), $$invalidate(5, recordingWaveform)); 5654 }); 5655 } 5656 5657 function time_binding_1($$value) { 5658 binding_callbacks$3[$$value ? 'unshift' : 'push'](() => { 5659 durationRef = $$value; 5660 ($$invalidate(11, durationRef), $$invalidate(5, recordingWaveform)); 5661 }); 5662 } 5663 5664 function waveformrecordcontrols_record_binding(value) { 5665 record = value; 5666 $$invalidate(8, record); 5667 } 5668 5669 function waveformcontrols_waveform_binding(value) { 5670 recordingWaveform = value;
5671 $$invalidate(5, recordingWaveform); 5672 } 5673 5674 function waveformcontrols_trimDuration_binding(value) { 5675 trimDuration = value; 5676 $$invalidate(16, trimDuration); 5677 } 5678 5679 function waveformcontrols_mode_binding(value) { 5680 mode = value; 5681 $$invalidate(0, mode); 5682 } 5683 5684 $$self.$$set = $$props => { 5685 if ('mode' in $$props) $$invalidate(0, mode = $$props.mode); 5686 if ('i18n' in $$props) $$invalidate(1, i18n = $$props.i18n); 5687 if ('dispatch_blob' in $$props) $$invalidate(18, dispatch_blob = $$props.dispatch_blob); 5688 if ('waveform_settings' in $$props) $$invalidate(19, waveform_settings = $$props.waveform_settings); 5689 if ('waveform_options' in $$props) $$invalidate(2, waveform_options = $$props.waveform_options); 5690 if ('handle_reset_value' in $$props) $$invalidate(3, handle_reset_value = $$props.handle_reset_value); 5691 if ('editable' in $$props) $$invalidate(4, editable = $$props.editable); 5692 }; 5693 5694 $$self.$$.update = () => { 5695 if ($$self.$$.dirty[0] & /*record, waveform_options, microphoneContainer*/ 388) { 5696 record?.on("record-start", () => { 5697 start_interval(); 5698 $$invalidate(15, timing = true); 5699 dispatch("start_recording"); 5700 5701 if (waveform_options.show_recording_waveform) { 5702 let waveformCanvas = microphoneContainer; 5703 if (waveformCanvas) waveformCanvas.style.display = "block"; 5704 } 5705 }); 5706 } 5707 5708 if ($$self.$$.dirty[0] & /*record, interval, waveform_settings, dispatch_blob*/ 1835264) { 5709 record?.on("record-end", async blob => { 5710 $$invalidate(14, seconds = 0); 5711 $$invalidate(15, timing = false); 5712 clearInterval(interval); 5713 5714 try { 5715 const array_buffer = await blob.arrayBuffer(); 5716 const context = new AudioContext({ sampleRate: waveform_settings.sampleRate }); 5717 const audio_buffer = await context.decodeAudioData(array_buffer); 5718 5719 if (audio_buffer) await process_audio(audio_buffer).then(async audio => { 5720 await dispatch_blob([audio], "change"); 5721 await dispatch_blob([audio], "stop_recording"); 5722 }); 5723 } catch(e) { 5724 console.error(e); 5725 } 5726 }); 5727 } 5728 5729 if ($$self.$$.dirty[0] & /*record, interval*/ 1048832) { 5730 record?.on("record-pause", () => { 5731 dispatch("pause_recording"); 5732 clearInterval(interval); 5733 }); 5734 } 5735 5736 if ($$self.$$.dirty[0] & /*record*/ 256) { 5737 record?.on("record-resume", () => { 5738 start_interval(); 5739 }); 5740 } 5741 5742 if ($$self.$$.dirty[0] & /*recordingWaveform, durationRef*/ 2080) { 5743 recordingWaveform?.on("decode", duration => { 5744 $$invalidate(13, audio_duration = duration); 5745 durationRef && $$invalidate(11, durationRef.textContent = format_time(duration), durationRef); 5746 }); 5747 } 5748 5749 if ($$self.$$.dirty[0] & /*recordingWaveform, timeRef*/ 1056) { 5750 recordingWaveform?.on("timeupdate", currentTime => timeRef && $$invalidate(10, timeRef.textContent = format_time(currentTime), timeRef)); 5751 } 5752 5753 if ($$self.$$.dirty[0] & /*recordingWaveform*/ 32) { 5754 recordingWaveform?.on("pause", () => { 5755 dispatch("pause"); 5756 $$invalidate(12, playing = false); 5757 }); 5758 } 5759 5760 if ($$self.$$.dirty[0] & /*recordingWaveform*/ 32) { 5761 recordingWaveform?.on("play", () => { 5762 dispatch("play"); 5763 $$invalidate(12, playing = true); 5764 }); 5765 } 5766 5767 if ($$self.$$.dirty[0] & /*recordingWaveform*/ 32) { 5768 recordingWaveform?.on("finish", () => { 5769 dispatch("stop"); 5770 $$invalidate(12, playing = false); 5771 }); 5772 } 5773 5774 if ($$self.$$.dirty[0] & /*record, microphoneContainer, recordingContainer, recordedAudio*/ 960) { 5775 record?.on("record-end", blob => { 5776 $$invalidate(9, recordedAudio = URL.createObjectURL(blob)); 5777 const microphone = microphoneContainer; 5778 const recording = recordingContainer; 5779 if (microphone) microphone.style.display = "none"; 5780 5781 if (recording && recordedAudio) { 5782 recording.innerHTML = ""; 5783 create_recording_waveform(); 5784 } 5785 }); 5786 } 5787 }; 5788 5789 return [ 5790 mode, 5791 i18n, 5792 waveform_options, 5793 handle_reset_value, 5794 editable, 5795 recordingWaveform, 5796 recordingContainer, 5797 microphoneContainer, 5798 record, 5799 recordedAudio, 5800 timeRef, 5801 durationRef, 5802 playing, 5803 audio_duration, 5804 seconds, 5805 timing, 5806 trimDuration, 5807 handle_trim_audio, 5808 dispatch_blob, 5809 waveform_settings, 5810 interval, 5811 div0_binding, 5812 div1_binding, 5813 time_binding, 5814 time_binding_1, 5815 waveformrecordcontrols_record_binding, 5816 waveformcontrols_waveform_binding, 5817 waveformcontrols_trimDuration_binding, 5818 waveformcontrols_mode_binding 5819 ]; 5820} 5821 5822class AudioRecorder extends SvelteComponent$3 { 5823 constructor(options) { 5824 super(); 5825 5826 init$3( 5827 this, 5828 options, 5829 instance$3, 5830 create_fragment$3, 5831 safe_not_equal$3, 5832 { 5833 mode: 0, 5834 i18n: 1, 5835 dispatch_blob: 18, 5836 waveform_settings: 19, 5837 waveform_options: 2, 5838 handle_reset_value: 3, 5839 editable: 4 5840 }, 5841 null,
5842 [-1, -1] 5843 ); 5844 } 5845} 5846 5847const StreamAudio_svelte_svelte_type_style_lang = ''; 5848 5849/* home/runner/work/gradio/gradio/js/audio/streaming/StreamAudio.svelte generated by Svelte v4.2.2 */ 5850const { 5851 SvelteComponent: SvelteComponent$2, 5852 add_flush_callback: add_flush_callback$2, 5853 append: append$1, 5854 attr: attr$1, 5855 bind: bind$2, 5856 binding_callbacks: binding_callbacks$2, 5857 create_component: create_component$2, 5858 destroy_component: destroy_component$2, 5859 detach: detach$2, 5860 element: element$1, 5861 init: init$2, 5862 insert: insert$2, 5863 listen, 5864 mount_component: mount_component$2, 5865 null_to_empty, 5866 safe_not_equal: safe_not_equal$2, 5867 set_data, 5868 set_style, 5869 space: space$2, 5870 text, 5871 transition_in: transition_in$2, 5872 transition_out: transition_out$2 5873} = window.__gradio__svelte__internal; 5874const { onMount } = window.__gradio__svelte__internal; 5875function create_if_block_1$1(ctx) { 5876 let div; 5877 5878 return { 5879 c() { 5880 div = element$1("div"); 5881 set_style(div, "display", /*recording*/ ctx[0] ? "block" : "none"); 5882 }, 5883 m(target, anchor) { 5884 insert$2(target, div, anchor); 5885 /*div_binding*/ ctx[10](div); 5886 }, 5887 p(ctx, dirty) { 5888 if (dirty & /*recording*/ 1) { 5889 set_style(div, "display", /*recording*/ ctx[0] ? "block" : "none"); 5890 } 5891 }, 5892 d(detaching) { 5893 if (detaching) { 5894 detach$2(div); 5895 } 5896 5897 /*div_binding*/ ctx[10](null); 5898 } 5899 }; 5900} 5901 5902// (57:2) {:else} 5903function create_else_block$2(ctx) { 5904 let button; 5905 let span1; 5906 let t0; 5907 let t1_value = /*i18n*/ ctx[4]("audio.record") + ""; 5908 let t1; 5909 let mounted; 5910 let dispose; 5911 5912 return { 5913 c() { 5914 button = element$1("button"); 5915 span1 = element$1("span"); 5916 span1.innerHTML = `<span class="dot"></span>`; 5917 t0 = space$2(); 5918 t1 = text(t1_value); 5919 attr$1(span1, "class", "record-icon"); 5920 attr$1(button, "class", "record-button svelte-1m31gsz"); 5921 }, 5922 m(target, anchor) { 5923 insert$2(target, button, anchor); 5924 append$1(button, span1); 5925 append$1(button, t0); 5926 append$1(button, t1); 5927 5928 if (!mounted) { 5929 dispose = listen(button, "click", /*click_handler_1*/ ctx[12]); 5930 mounted = true; 5931 } 5932 }, 5933 p(ctx, dirty) { 5934 if (dirty & /*i18n*/ 16 && t1_value !== (t1_value = /*i18n*/ ctx[4]("audio.record") + "")) set_data(t1, t1_value); 5935 }, 5936 d(detaching) { 5937 if (detaching) { 5938 detach$2(button); 5939 } 5940 5941 mounted = false; 5942 dispose(); 5943 } 5944 }; 5945} 5946 5947// (43:2) {#if recording} 5948function create_if_block$2(ctx) { 5949 let button; 5950 let span2; 5951 let t1; 5952 5953 let t2_value = (/*paused_recording*/ ctx[1] 5954 ? /*i18n*/ ctx[4]("audio.pause") 5955 : /*i18n*/ ctx[4]("audio.stop")) + ""; 5956 5957 let t2; 5958 let button_class_value; 5959 let mounted; 5960 let dispose; 5961 5962 return { 5963 c() { 5964 button = element$1("button"); 5965 span2 = element$1("span"); 5966 span2.innerHTML = `<span class="pinger"></span> <span class="dot"></span>`; 5967 t1 = space$2(); 5968 t2 = text(t2_value); 5969 attr$1(span2, "class", "record-icon"); 5970 5971 attr$1(button, "class", button_class_value = "" + (null_to_empty(/*paused_recording*/ ctx[1] 5972 ? "stop-button-paused" 5973 : "stop-button") + " svelte-1m31gsz")); 5974 }, 5975 m(target, anchor) { 5976 insert$2(target, button, anchor); 5977 append$1(button, span2); 5978 append$1(button, t1); 5979 append$1(button, t2); 5980 5981 if (!mounted) { 5982 dispose = listen(button, "click", /*click_handler*/ ctx[11]); 5983 mounted = true; 5984 } 5985 }, 5986 p(ctx, dirty) { 5987 if (dirty & /*paused_recording, i18n*/ 18 && t2_value !== (t2_value = (/*paused_recording*/ ctx[1] 5988 ? /*i18n*/ ctx[4]("audio.pause") 5989 : /*i18n*/ ctx[4]("audio.stop")) + "")) set_data(t2, t2_value); 5990 5991 if (dirty & /*paused_recording*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*paused_recording*/ ctx[1] 5992 ? "stop-button-paused" 5993 : "stop-button") + " svelte-1m31gsz"))) { 5994 attr$1(button, "class", button_class_value); 5995 } 5996 }, 5997 d(detaching) { 5998 if (detaching) { 5999 detach$2(button); 6000 } 6001 6002 mounted = false; 6003 dispose(); 6004 } 6005 }; 6006} 6007 6008function create_fragment$2(ctx) { 6009 let div1; 6010 let t0; 6011 let div0; 6012 let t1; 6013 let deviceselect; 6014 let updating_micDevices; 6015 let current; 6016 let if_block0 = /*waveform_options*/ ctx[5].show_recording_waveform && create_if_block_1$1(ctx); 6017 6018 function select_block_type(ctx, dirty) { 6019 if (/*recording*/ ctx[0]) return create_if_block$2; 6020 return create_else_block$2; 6021 } 6022 6023 let current_block_type = select_block_type(ctx); 6024 let if_block1 = current_block_type(ctx); 6025 6026 function deviceselect_micDevices_binding(value) { 6027 /*deviceselect_micDevices_binding*/ ctx[13](value); 6028 } 6029 6030 let deviceselect_props = { i18n: /*i18n*/ ctx[4] }; 6031 6032 if (/*micDevices*/ ctx[8] !== void 0) { 6033 deviceselect_props.micDevices = /*micDevices*/ ctx[8]; 6034 } 6035 6036 deviceselect = new DeviceSelect({ props: deviceselect_props }); 6037 binding_callbacks$2.push(() => bind$2(deviceselect, 'micDevices', deviceselect_micDevices_binding)); 6038 6039 return { 6040 c() { 6041 div1 = element$1("div"); 6042 if (if_block0) if_block0.c(); 6043 t0 = space$2(); 6044 div0 = element$1("div"); 6045 if_block1.c(); 6046 t1 = space$2(); 6047 create_component$2(deviceselect.$$.fragment); 6048 attr$1(div0, "class", "controls svelte-1m31gsz"); 6049 attr$1(div1, "class", "mic-wrap svelte-1m31gsz"); 6050 }, 6051 m(target, anchor) { 6052 insert$2(target, div1, anchor); 6053 if (if_block0) if_block0.m(div1, null); 6054 append$1(div1, t0); 6055 append$1(div1, div0); 6056 if_block1.m(div0, null); 6057 append$1(div0, t1);
6058 mount_component$2(deviceselect, div0, null); 6059 current = true; 6060 }, 6061 p(ctx, [dirty]) { 6062 if (/*waveform_options*/ ctx[5].show_recording_waveform) { 6063 if (if_block0) { 6064 if_block0.p(ctx, dirty); 6065 } else { 6066 if_block0 = create_if_block_1$1(ctx); 6067 if_block0.c(); 6068 if_block0.m(div1, t0); 6069 } 6070 } else if (if_block0) { 6071 if_block0.d(1); 6072 if_block0 = null; 6073 } 6074 6075 if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block1) { 6076 if_block1.p(ctx, dirty); 6077 } else { 6078 if_block1.d(1); 6079 if_block1 = current_block_type(ctx); 6080 6081 if (if_block1) { 6082 if_block1.c(); 6083 if_block1.m(div0, t1); 6084 } 6085 } 6086 6087 const deviceselect_changes = {}; 6088 if (dirty & /*i18n*/ 16) deviceselect_changes.i18n = /*i18n*/ ctx[4]; 6089 6090 if (!updating_micDevices && dirty & /*micDevices*/ 256) { 6091 updating_micDevices = true; 6092 deviceselect_changes.micDevices = /*micDevices*/ ctx[8]; 6093 add_flush_callback$2(() => updating_micDevices = false); 6094 } 6095 6096 deviceselect.$set(deviceselect_changes); 6097 }, 6098 i(local) { 6099 if (current) return; 6100 transition_in$2(deviceselect.$$.fragment, local); 6101 current = true; 6102 }, 6103 o(local) { 6104 transition_out$2(deviceselect.$$.fragment, local); 6105 current = false; 6106 }, 6107 d(detaching) { 6108 if (detaching) { 6109 detach$2(div1); 6110 } 6111 6112 if (if_block0) if_block0.d(); 6113 if_block1.d(); 6114 destroy_component$2(deviceselect); 6115 } 6116 }; 6117} 6118 6119function instance$2($$self, $$props, $$invalidate) { 6120 let { recording = false } = $$props; 6121 let { paused_recording = false } = $$props; 6122 let { stop } = $$props; 6123 let { record } = $$props; 6124 let { i18n } = $$props; 6125 let { waveform_settings } = $$props; 6126 let { waveform_options = { show_recording_waveform: true } } = $$props; 6127 let micWaveform; 6128 let waveformRecord; 6129 let microphoneContainer; 6130 let micDevices = []; 6131 6132 onMount(() => { 6133 create_mic_waveform(); 6134 }); 6135 6136 const create_mic_waveform = () => { 6137 if (micWaveform !== undefined) micWaveform.destroy(); 6138 if (!microphoneContainer) return; 6139 6140 micWaveform = WaveSurfer.create({ 6141 ...waveform_settings, 6142 height: 100, 6143 container: microphoneContainer 6144 }); 6145 6146 $$invalidate(6, waveformRecord = micWaveform.registerPlugin(r.create())); 6147 }; 6148 6149 function div_binding($$value) { 6150 binding_callbacks$2[$$value ? 'unshift' : 'push'](() => { 6151 microphoneContainer = $$value; 6152 $$invalidate(7, microphoneContainer); 6153 }); 6154 } 6155 6156 const click_handler = () => { 6157 waveformRecord?.stopMic(); 6158 stop(); 6159 }; 6160 6161 const click_handler_1 = () => { 6162 waveformRecord?.startMic(); 6163 record(); 6164 }; 6165 6166 function deviceselect_micDevices_binding(value) { 6167 micDevices = value; 6168 $$invalidate(8, micDevices); 6169 } 6170 6171 $$self.$$set = $$props => {
6172 if ('recording' in $$props) $$invalidate(0, recording = $$props.recording); 6173 if ('paused_recording' in $$props) $$invalidate(1, paused_recording = $$props.paused_recording); 6174 if ('stop' in $$props) $$invalidate(2, stop = $$props.stop); 6175 if ('record' in $$props) $$invalidate(3, record = $$props.record); 6176 if ('i18n' in $$props) $$invalidate(4, i18n = $$props.i18n); 6177 if ('waveform_settings' in $$props) $$invalidate(9, waveform_settings = $$props.waveform_settings); 6178 if ('waveform_options' in $$props) $$invalidate(5, waveform_options = $$props.waveform_options); 6179 }; 6180 6181 return [ 6182 recording, 6183 paused_recording, 6184 stop, 6185 record, 6186 i18n, 6187 waveform_options, 6188 waveformRecord, 6189 microphoneContainer, 6190 micDevices, 6191 waveform_settings, 6192 div_binding, 6193 click_handler, 6194 click_handler_1, 6195 deviceselect_micDevices_binding 6196 ]; 6197} 6198 6199class StreamAudio extends SvelteComponent$2 { 6200 constructor(options) { 6201 super(); 6202 6203 init$2(this, options, instance$2, create_fragment$2, safe_not_equal$2, { 6204 recording: 0, 6205 paused_recording: 1, 6206 stop: 2, 6207 record: 3, 6208 i18n: 4, 6209 waveform_settings: 9, 6210 waveform_options: 5 6211 }); 6212 } 6213} 6214 6215const InteractiveAudio_svelte_svelte_type_style_lang = ''; 6216 6217const { 6218 SvelteComponent: SvelteComponent$1, 6219 add_flush_callback: add_flush_callback$1, 6220 append, 6221 attr, 6222 bind: bind$1, 6223 binding_callbacks: binding_callbacks$1, 6224 bubble, 6225 check_outros: check_outros$1, 6226 create_component: create_component$1, 6227 create_slot, 6228 destroy_component: destroy_component$1, 6229 detach: detach$1, 6230 element, 6231 empty: empty$1, 6232 get_all_dirty_from_scope, 6233 get_slot_changes, 6234 group_outros: group_outros$1, 6235 init: init$1, 6236 insert: insert$1, 6237 mount_component: mount_component$1, 6238 safe_not_equal: safe_not_equal$1, 6239 space: space$1, 6240 transition_in: transition_in$1, 6241 transition_out: transition_out$1, 6242 update_slot_base 6243} = window.__gradio__svelte__internal; 6244const { getContext, onDestroy, createEventDispatcher } = window.__gradio__svelte__internal; 6245function create_else_block_1(ctx) { 6246 let modifyupload; 6247 let t; 6248 let audioplayer; 6249 let updating_mode; 6250 let current; 6251 6252 modifyupload = new ModifyUpload({ 6253 props: { 6254 i18n: /*i18n*/ ctx[9], 6255 download: /*show_download_button*/ ctx[6] 6256 ? /*value*/ ctx[1].url 6257 : null, 6258 absolute: true 6259 } 6260 }); 6261 6262 modifyupload.$on("clear", /*clear*/ ctx[20]); 6263 modifyupload.$on("edit", /*edit_handler_1*/ ctx[34]); 6264 6265 function audioplayer_mode_binding(value) { 6266 /*audioplayer_mode_binding*/ ctx[35](value); 6267 } 6268 6269 let audioplayer_props = { 6270 value: /*value*/ ctx[1], 6271 label: /*label*/ ctx[3], 6272 i18n: /*i18n*/ ctx[9], 6273 dispatch_blob: /*dispatch_blob*/ ctx[18], 6274 waveform_settings: /*waveform_settings*/ ctx[10], 6275 waveform_options: /*waveform_options*/ ctx[12], 6276 trim_region_settings: /*trim_region_settings*/ ctx[11], 6277 handle_reset_value: /*handle_reset_value*/ ctx[13], 6278 editable: /*editable*/ ctx[14], 6279 interactive: true 6280 }; 6281 6282 if (/*mode*/ ctx[16] !== void 0) { 6283 audioplayer_props.mode = /*mode*/ ctx[16]; 6284 } 6285 6286 audioplayer = new AudioPlayer$1({ props: audioplayer_props }); 6287 binding_callbacks$1.push(() => bind$1(audioplayer, 'mode', audioplayer_mode_binding)); 6288 audioplayer.$on("stop", /*stop_handler*/ ctx[36]); 6289 audioplayer.$on("play", /*play_handler*/ ctx[37]); 6290 audioplayer.$on("pause", /*pause_handler*/ ctx[38]); 6291 audioplayer.$on("edit", /*edit_handler*/ ctx[39]); 6292 6293 return { 6294 c() { 6295 create_component$1(modifyupload.$$.fragment); 6296 t = space$1(); 6297 create_component$1(audioplayer.$$.fragment); 6298 }, 6299 m(target, anchor) { 6300 mount_component$1(modifyupload, target, anchor); 6301 insert$1(target, t, anchor); 6302 mount_component$1(audioplayer, target, anchor); 6303 current = true; 6304 }, 6305 p(ctx, dirty) { 6306 const modifyupload_changes = {}; 6307 if (dirty[0] & /*i18n*/ 512) modifyupload_changes.i18n = /*i18n*/ ctx[9]; 6308 6309 if (dirty[0] & /*show_download_button, value*/ 66) modifyupload_changes.download = /*show_download_button*/ ctx[6] 6310 ? /*value*/ ctx[1].url 6311 : null; 6312 6313 modifyupload.$set(modifyupload_changes); 6314 const audioplayer_changes = {}; 6315 if (dirty[0] & /*value*/ 2) audioplayer_changes.value = /*value*/ ctx[1];
6316 if (dirty[0] & /*label*/ 8) audioplayer_changes.label = /*label*/ ctx[3]; 6317 if (dirty[0] & /*i18n*/ 512) audioplayer_changes.i18n = /*i18n*/ ctx[9]; 6318 if (dirty[0] & /*waveform_settings*/ 1024) audioplayer_changes.waveform_settings = /*waveform_settings*/ ctx[10]; 6319 if (dirty[0] & /*waveform_options*/ 4096) audioplayer_changes.waveform_options = /*waveform_options*/ ctx[12]; 6320 if (dirty[0] & /*trim_region_settings*/ 2048) audioplayer_changes.trim_region_settings = /*trim_region_settings*/ ctx[11]; 6321 if (dirty[0] & /*handle_reset_value*/ 8192) audioplayer_changes.handle_reset_value = /*handle_reset_value*/ ctx[13]; 6322 if (dirty[0] & /*editable*/ 16384) audioplayer_changes.editable = /*editable*/ ctx[14]; 6323 6324 if (!updating_mode && dirty[0] & /*mode*/ 65536) { 6325 updating_mode = true; 6326 audioplayer_changes.mode = /*mode*/ ctx[16]; 6327 add_flush_callback$1(() => updating_mode = false); 6328 } 6329 6330 audioplayer.$set(audioplayer_changes); 6331 }, 6332 i(local) { 6333 if (current) return; 6334 transition_in$1(modifyupload.$$.fragment, local); 6335 transition_in$1(audioplayer.$$.fragment, local); 6336 current = true; 6337 }, 6338 o(local) { 6339 transition_out$1(modifyupload.$$.fragment, local); 6340 transition_out$1(audioplayer.$$.fragment, local); 6341 current = false; 6342 }, 6343 d(detaching) { 6344 if (detaching) { 6345 detach$1(t); 6346 } 6347 6348 destroy_component$1(modifyupload, detaching); 6349 destroy_component$1(audioplayer, detaching); 6350 } 6351 }; 6352} 6353 6354// (168:1) {#if value === null || streaming} 6355function create_if_block$1(ctx) { 6356 let current_block_type_index; 6357 let if_block; 6358 let if_block_anchor; 6359 let current; 6360 const if_block_creators = [create_if_block_1, create_if_block_3]; 6361 const if_blocks = []; 6362 6363 function select_block_type_1(ctx, dirty) { 6364 if (/*active_source*/ ctx[2] === "microphone") return 0; 6365 if (/*active_source*/ ctx[2] === "upload") return 1; 6366 return -1; 6367 } 6368 6369 if (~(current_block_type_index = select_block_type_1(ctx))) { 6370 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6371 } 6372 6373 return { 6374 c() { 6375 if (if_block) if_block.c(); 6376 if_block_anchor = empty$1(); 6377 }, 6378 m(target, anchor) { 6379 if (~current_block_type_index) { 6380 if_blocks[current_block_type_index].m(target, anchor); 6381 } 6382 6383 insert$1(target, if_block_anchor, anchor); 6384 current = true; 6385 }, 6386 p(ctx, dirty) { 6387 let previous_block_index = current_block_type_index; 6388 current_block_type_index = select_block_type_1(ctx); 6389 6390 if (current_block_type_index === previous_block_index) { 6391 if (~current_block_type_index) { 6392 if_blocks[current_block_type_index].p(ctx, dirty); 6393 } 6394 } else { 6395 if (if_block) { 6396 group_outros$1(); 6397 6398 transition_out$1(if_blocks[previous_block_index], 1, 1, () => { 6399 if_blocks[previous_block_index] = null; 6400 }); 6401 6402 check_outros$1(); 6403 } 6404 6405 if (~current_block_type_index) { 6406 if_block = if_blocks[current_block_type_index]; 6407 6408 if (!if_block) { 6409 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6410 if_block.c(); 6411 } else { 6412 if_block.p(ctx, dirty); 6413 } 6414 6415 transition_in$1(if_block, 1); 6416 if_block.m(if_block_anchor.parentNode, if_block_anchor); 6417 } else { 6418 if_block = null; 6419 } 6420 } 6421 }, 6422 i(local) { 6423 if (current) return; 6424 transition_in$1(if_block); 6425 current = true; 6426 }, 6427 o(local) { 6428 transition_out$1(if_block); 6429 current = false; 6430 }, 6431 d(detaching) { 6432 if (detaching) { 6433 detach$1(if_block_anchor); 6434 } 6435 6436 if (~current_block_type_index) { 6437 if_blocks[current_block_type_index].d(detaching); 6438 } 6439 } 6440 }; 6441} 6442 6443// (194:39) 6444function create_if_block_3(ctx) { 6445 let upload_1; 6446 let updating_dragging; 6447 let current; 6448 6449 function upload_1_dragging_binding(value) { 6450 /*upload_1_dragging_binding*/ ctx[32](value); 6451 } 6452 6453 let upload_1_props = { 6454 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/*", 6455 root: /*root*/ ctx[4], 6456 $$slots: { default: [create_default_slot$1] }, 6457 $$scope: { ctx } 6458 }; 6459 6460 if (/*dragging*/ ctx[0] !== void 0) { 6461 upload_1_props.dragging = /*dragging*/ ctx[0]; 6462 } 6463 6464 upload_1 = new Upload({ props: upload_1_props }); 6465 binding_callbacks$1.push(() => bind$1(upload_1, 'dragging', upload_1_dragging_binding)); 6466 upload_1.$on("load", /*handle_load*/ ctx[21]); 6467 upload_1.$on("error", /*error_handler*/ ctx[33]); 6468 6469 return { 6470 c() { 6471 create_component$1(upload_1.$$.fragment); 6472 }, 6473 m(target, anchor) { 6474 mount_component$1(upload_1, target, anchor); 6475 current = true; 6476 }, 6477 p(ctx, dirty) { 6478 const upload_1_changes = {};
6479 if (dirty[0] & /*root*/ 16) upload_1_changes.root = /*root*/ ctx[4]; 6480 6481 if (dirty[1] & /*$$scope*/ 1024) { 6482 upload_1_changes.$$scope = { dirty, ctx }; 6483 } 6484 6485 if (!updating_dragging && dirty[0] & /*dragging*/ 1) { 6486 updating_dragging = true; 6487 upload_1_changes.dragging = /*dragging*/ ctx[0]; 6488 add_flush_callback$1(() => updating_dragging = false); 6489 } 6490 6491 upload_1.$set(upload_1_changes); 6492 }, 6493 i(local) { 6494 if (current) return; 6495 transition_in$1(upload_1.$$.fragment, local); 6496 current = true; 6497 }, 6498 o(local) { 6499 transition_out$1(upload_1.$$.fragment, local); 6500 current = false; 6501 }, 6502 d(detaching) { 6503 destroy_component$1(upload_1, detaching); 6504 } 6505 }; 6506} 6507 6508// (169:2) {#if active_source === "microphone"} 6509function create_if_block_1(ctx) { 6510 let modifyupload; 6511 let t; 6512 let current_block_type_index; 6513 let if_block; 6514 let if_block_anchor; 6515 let current; 6516 6517 modifyupload = new ModifyUpload({ 6518 props: { i18n: /*i18n*/ ctx[9], absolute: true } 6519 }); 6520 6521 modifyupload.$on("clear", /*clear*/ ctx[20]); 6522 const if_block_creators = [create_if_block_2, create_else_block$1]; 6523 const if_blocks = []; 6524 6525 function select_block_type_2(ctx, dirty) { 6526 if (/*streaming*/ ctx[8]) return 0; 6527 return 1; 6528 } 6529 6530 current_block_type_index = select_block_type_2(ctx); 6531 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6532 6533 return { 6534 c() { 6535 create_component$1(modifyupload.$$.fragment); 6536 t = space$1(); 6537 if_block.c(); 6538 if_block_anchor = empty$1(); 6539 }, 6540 m(target, anchor) { 6541 mount_component$1(modifyupload, target, anchor); 6542 insert$1(target, t, anchor); 6543 if_blocks[current_block_type_index].m(target, anchor); 6544 insert$1(target, if_block_anchor, anchor); 6545 current = true; 6546 }, 6547 p(ctx, dirty) { 6548 const modifyupload_changes = {}; 6549 if (dirty[0] & /*i18n*/ 512) modifyupload_changes.i18n = /*i18n*/ ctx[9]; 6550 modifyupload.$set(modifyupload_changes); 6551 let previous_block_index = current_block_type_index; 6552 current_block_type_index = select_block_type_2(ctx); 6553 6554 if (current_block_type_index === previous_block_index) { 6555 if_blocks[current_block_type_index].p(ctx, dirty); 6556 } else { 6557 group_outros$1(); 6558 6559 transition_out$1(if_blocks[previous_block_index], 1, 1, () => { 6560 if_blocks[previous_block_index] = null; 6561 }); 6562 6563 check_outros$1(); 6564 if_block = if_blocks[current_block_type_index]; 6565 6566 if (!if_block) { 6567 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6568 if_block.c(); 6569 } else { 6570 if_block.p(ctx, dirty); 6571 } 6572 6573 transition_in$1(if_block, 1); 6574 if_block.m(if_block_anchor.parentNode, if_block_anchor); 6575 } 6576 }, 6577 i(local) { 6578 if (current) return; 6579 transition_in$1(modifyupload.$$.fragment, local); 6580 transition_in$1(if_block); 6581 current = true; 6582 }, 6583 o(local) { 6584 transition_out$1(modifyupload.$$.fragment, local); 6585 transition_out$1(if_block); 6586 current = false; 6587 }, 6588 d(detaching) { 6589 if (detaching) { 6590 detach$1(t); 6591 detach$1(if_block_anchor); 6592 } 6593 6594 destroy_component$1(modifyupload, detaching); 6595 if_blocks[current_block_type_index].d(detaching); 6596 } 6597 }; 6598} 6599 6600// (196:3) <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} > 6601function create_default_slot$1(ctx) { 6602 let current; 6603 const default_slot_template = /*#slots*/ ctx[27].default; 6604 const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[41], null); 6605 6606 return { 6607 c() { 6608 if (default_slot) default_slot.c(); 6609 }, 6610 m(target, anchor) { 6611 if (default_slot) { 6612 default_slot.m(target, anchor); 6613 } 6614 6615 current = true; 6616 }, 6617 p(ctx, dirty) { 6618 if (default_slot) { 6619 if (default_slot.p && (!current || dirty[1] & /*$$scope*/ 1024)) { 6620 update_slot_base( 6621 default_slot, 6622 default_slot_template, 6623 ctx, 6624 /*$$scope*/ ctx[41], 6625 !current 6626 ? get_all_dirty_from_scope(/*$$scope*/ ctx[41]) 6627 : get_slot_changes(default_slot_template, /*$$scope*/ ctx[41], dirty, null), 6628 null 6629 ); 6630 } 6631 } 6632 }, 6633 i(local) { 6634 if (current) return; 6635 transition_in$1(default_slot, local); 6636 current = true; 6637 }, 6638 o(local) { 6639 transition_out$1(default_slot, local); 6640 current = false;
6641 }, 6642 d(detaching) { 6643 if (default_slot) default_slot.d(detaching); 6644 } 6645 }; 6646} 6647 6648// (180:3) {:else} 6649function create_else_block$1(ctx) { 6650 let audiorecorder; 6651 let updating_mode; 6652 let current; 6653 6654 function audiorecorder_mode_binding(value) { 6655 /*audiorecorder_mode_binding*/ ctx[28](value); 6656 } 6657 6658 let audiorecorder_props = { 6659 i18n: /*i18n*/ ctx[9], 6660 editable: /*editable*/ ctx[14], 6661 dispatch_blob: /*dispatch_blob*/ ctx[18], 6662 waveform_settings: /*waveform_settings*/ ctx[10], 6663 waveform_options: /*waveform_options*/ ctx[12], 6664 handle_reset_value: /*handle_reset_value*/ ctx[13] 6665 }; 6666 6667 if (/*mode*/ ctx[16] !== void 0) { 6668 audiorecorder_props.mode = /*mode*/ ctx[16]; 6669 } 6670 6671 audiorecorder = new AudioRecorder({ props: audiorecorder_props }); 6672 binding_callbacks$1.push(() => bind$1(audiorecorder, 'mode', audiorecorder_mode_binding)); 6673 audiorecorder.$on("start_recording", /*start_recording_handler*/ ctx[29]); 6674 audiorecorder.$on("pause_recording", /*pause_recording_handler*/ ctx[30]); 6675 audiorecorder.$on("stop_recording", /*stop_recording_handler*/ ctx[31]); 6676 6677 return { 6678 c() { 6679 create_component$1(audiorecorder.$$.fragment); 6680 }, 6681 m(target, anchor) { 6682 mount_component$1(audiorecorder, target, anchor); 6683 current = true; 6684 }, 6685 p(ctx, dirty) { 6686 const audiorecorder_changes = {}; 6687 if (dirty[0] & /*i18n*/ 512) audiorecorder_changes.i18n = /*i18n*/ ctx[9]; 6688 if (dirty[0] & /*editable*/ 16384) audiorecorder_changes.editable = /*editable*/ ctx[14]; 6689 if (dirty[0] & /*waveform_settings*/ 1024) audiorecorder_changes.waveform_settings = /*waveform_settings*/ ctx[10]; 6690 if (dirty[0] & /*waveform_options*/ 4096) audiorecorder_changes.waveform_options = /*waveform_options*/ ctx[12]; 6691 if (dirty[0] & /*handle_reset_value*/ 8192) audiorecorder_changes.handle_reset_value = /*handle_reset_value*/ ctx[13]; 6692 6693 if (!updating_mode && dirty[0] & /*mode*/ 65536) { 6694 updating_mode = true; 6695 audiorecorder_changes.mode = /*mode*/ ctx[16]; 6696 add_flush_callback$1(() => updating_mode = false); 6697 } 6698 6699 audiorecorder.$set(audiorecorder_changes); 6700 }, 6701 i(local) { 6702 if (current) return; 6703 transition_in$1(audiorecorder.$$.fragment, local); 6704 current = true; 6705 }, 6706 o(local) { 6707 transition_out$1(audiorecorder.$$.fragment, local); 6708 current = false; 6709 }, 6710 d(detaching) { 6711 destroy_component$1(audiorecorder, detaching); 6712 } 6713 }; 6714} 6715 6716// (171:3) {#if streaming} 6717function create_if_block_2(ctx) { 6718 let streamaudio; 6719 let current; 6720 6721 streamaudio = new StreamAudio({ 6722 props: { 6723 record: /*record*/ ctx[19], 6724 recording: /*recording*/ ctx[15], 6725 stop: /*stop*/ ctx[22], 6726 i18n: /*i18n*/ ctx[9], 6727 waveform_settings: /*waveform_settings*/ ctx[10], 6728 waveform_options: /*waveform_options*/ ctx[12] 6729 } 6730 }); 6731 6732 return { 6733 c() { 6734 create_component$1(streamaudio.$$.fragment); 6735 }, 6736 m(target, anchor) { 6737 mount_component$1(streamaudio, target, anchor); 6738 current = true; 6739 }, 6740 p(ctx, dirty) { 6741 const streamaudio_changes = {}; 6742 if (dirty[0] & /*recording*/ 32768) streamaudio_changes.recording = /*recording*/ ctx[15]; 6743 if (dirty[0] & /*i18n*/ 512) streamaudio_changes.i18n = /*i18n*/ ctx[9]; 6744 if (dirty[0] & /*waveform_settings*/ 1024) streamaudio_changes.waveform_settings = /*waveform_settings*/ ctx[10]; 6745 if (dirty[0] & /*waveform_options*/ 4096) streamaudio_changes.waveform_options = /*waveform_options*/ ctx[12]; 6746 streamaudio.$set(streamaudio_changes); 6747 }, 6748 i(local) { 6749 if (current) return; 6750 transition_in$1(streamaudio.$$.fragment, local); 6751 current = true; 6752 }, 6753 o(local) { 6754 transition_out$1(streamaudio.$$.fragment, local); 6755 current = false; 6756 }, 6757 d(detaching) { 6758 destroy_component$1(streamaudio, detaching); 6759 } 6760 }; 6761} 6762 6763function create_fragment$1(ctx) { 6764 let blocklabel; 6765 let t0; 6766 let div; 6767 let current_block_type_index; 6768 let if_block; 6769 let t1; 6770 let selectsource; 6771 let updating_active_source; 6772 let current; 6773 6774 blocklabel = new BlockLabel({ 6775 props: { 6776 show_label: /*show_label*/ ctx[5], 6777 Icon: Music, 6778 float: /*active_source*/ ctx[2] === "upload" && /*value*/ ctx[1] === null, 6779 label: /*label*/ ctx[3] || /*i18n*/ ctx[9]("audio.audio") 6780 } 6781 }); 6782 6783 const if_block_creators = [create_if_block$1, create_else_block_1]; 6784 const if_blocks = []; 6785 6786 function select_block_type(ctx, dirty) { 6787 if (/*value*/ ctx[1] === null || /*streaming*/ ctx[8]) return 0; 6788 return 1; 6789 } 6790 6791 current_block_type_index = select_block_type(ctx); 6792 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6793 6794 function selectsource_active_source_binding(value) { 6795 /*selectsource_active_source_binding*/ ctx[40](value); 6796 } 6797 6798 let selectsource_props = { 6799 sources: /*sources*/ ctx[7], 6800 handle_clear: /*clear*/ ctx[20] 6801 }; 6802 6803 if (/*active_source*/ ctx[2] !== void 0) { 6804 selectsource_props.active_source = /*active_source*/ ctx[2]; 6805 } 6806 6807 selectsource = new SelectSource({ props: selectsource_props }); 6808 binding_callbacks$1.push(() => bind$1(selectsource, 'active_source', selectsource_active_source_binding)); 6809 6810 return { 6811 c() { 6812 create_component$1(blocklabel.$$.fragment); 6813 t0 = space$1(); 6814 div = element("div"); 6815 if_block.c(); 6816 t1 = space$1(); 6817 create_component$1(selectsource.$$.fragment); 6818 attr(div, "class", "audio-container svelte-cbyffp"); 6819 }, 6820 m(target, anchor) { 6821 mount_component$1(blocklabel, target, anchor); 6822 insert$1(target, t0, anchor); 6823 insert$1(target, div, anchor); 6824 if_blocks[current_block_type_index].m(div, null); 6825 append(div, t1);
6826 mount_component$1(selectsource, div, null); 6827 current = true; 6828 }, 6829 p(ctx, dirty) { 6830 const blocklabel_changes = {}; 6831 if (dirty[0] & /*show_label*/ 32) blocklabel_changes.show_label = /*show_label*/ ctx[5]; 6832 if (dirty[0] & /*active_source, value*/ 6) blocklabel_changes.float = /*active_source*/ ctx[2] === "upload" && /*value*/ ctx[1] === null; 6833 if (dirty[0] & /*label, i18n*/ 520) blocklabel_changes.label = /*label*/ ctx[3] || /*i18n*/ ctx[9]("audio.audio"); 6834 blocklabel.$set(blocklabel_changes); 6835 let previous_block_index = current_block_type_index; 6836 current_block_type_index = select_block_type(ctx); 6837 6838 if (current_block_type_index === previous_block_index) { 6839 if_blocks[current_block_type_index].p(ctx, dirty); 6840 } else { 6841 group_outros$1(); 6842 6843 transition_out$1(if_blocks[previous_block_index], 1, 1, () => { 6844 if_blocks[previous_block_index] = null; 6845 }); 6846 6847 check_outros$1(); 6848 if_block = if_blocks[current_block_type_index]; 6849 6850 if (!if_block) { 6851 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 6852 if_block.c(); 6853 } else { 6854 if_block.p(ctx, dirty); 6855 } 6856 6857 transition_in$1(if_block, 1); 6858 if_block.m(div, t1); 6859 } 6860 6861 const selectsource_changes = {}; 6862 if (dirty[0] & /*sources*/ 128) selectsource_changes.sources = /*sources*/ ctx[7]; 6863 6864 if (!updating_active_source && dirty[0] & /*active_source*/ 4) { 6865 updating_active_source = true; 6866 selectsource_changes.active_source = /*active_source*/ ctx[2]; 6867 add_flush_callback$1(() => updating_active_source = false); 6868 } 6869 6870 selectsource.$set(selectsource_changes); 6871 }, 6872 i(local) { 6873 if (current) return; 6874 transition_in$1(blocklabel.$$.fragment, local); 6875 transition_in$1(if_block); 6876 transition_in$1(selectsource.$$.fragment, local); 6877 current = true; 6878 }, 6879 o(local) { 6880 transition_out$1(blocklabel.$$.fragment, local); 6881 transition_out$1(if_block); 6882 transition_out$1(selectsource.$$.fragment, local); 6883 current = false; 6884 }, 6885 d(detaching) { 6886 if (detaching) { 6887 detach$1(t0); 6888 detach$1(div); 6889 } 6890 6891 destroy_component$1(blocklabel, detaching); 6892 if_blocks[current_block_type_index].d(); 6893 destroy_component$1(selectsource); 6894 } 6895 }; 6896} 6897 6898const STREAM_TIMESLICE = 500; 6899const NUM_HEADER_BYTES = 44; 6900 6901function instance$1($$self, $$props, $$invalidate) { 6902 let { $$slots: slots = {}, $$scope } = $$props; 6903 let { value = null } = $$props; 6904 let { label } = $$props; 6905 let { root } = $$props; 6906 let { show_label = true } = $$props; 6907 let { show_download_button = false } = $$props; 6908 let { sources = ["microphone", "upload"] } = $$props; 6909 let { pending = false } = $$props; 6910 let { streaming = false } = $$props; 6911 let { i18n } = $$props; 6912 let { waveform_settings } = $$props; 6913 let { trim_region_settings = {} } = $$props; 6914 let { waveform_options = {} } = $$props; 6915 let { dragging } = $$props; 6916 let { active_source } = $$props; 6917 6918 let { handle_reset_value = () => { 6919 6920 } } = $$props; 6921 6922 let { editable = true } = $$props; 6923 6924 // Needed for wasm support 6925 const upload_fn = getContext("upload_files"); 6926 6927 // TODO: make use of this 6928 // export let type: "normal" | "numpy" = "normal"; 6929 let recording = false; 6930 6931 let recorder; 6932 let mode = ""; 6933 let header = undefined; 6934 let pending_stream = []; 6935 let submit_pending_stream_on_pending_end = false; 6936 let inited = false; 6937 let audio_chunks = []; 6938 let module_promises; 6939 6940 function get_modules() { 6941 module_promises = [ 6942 __vitePreload(() => import('./module-997303ec.js'),true?["./module-997303ec.js","./module-a4efca6e.js","./Index-e8ffd830.js","./index-dc71b4a2.js","./index-33179a8d.css","./Index-671788bd.css"]:void 0,import.meta.url), 6943 __vitePreload(() => import('./module-698c739c.js'),true?["./module-698c739c.js","./module-a4efca6e.js"]:void 0,import.meta.url) 6944 ]; 6945 } 6946 6947 if (streaming) { 6948 get_modules(); 6949 } 6950 6951 const dispatch = createEventDispatcher(); 6952 6953 const dispatch_blob = async (blobs, event) => { 6954 let _audio_blob = new File(blobs, "audio.wav"); 6955 const val = await prepare_files([_audio_blob], event === "stream"); 6956 $$invalidate(1, value = (await upload(val, root, undefined, upload_fn))?.filter(Boolean)[0]); 6957 dispatch(event, value); 6958 }; 6959 6960 onDestroy(() => { 6961 if (streaming && recorder && recorder.state !== "inactive") { 6962 recorder.stop(); 6963 } 6964 }); 6965 6966 async function prepare_audio() { 6967 let stream; 6968 6969 try { 6970 stream = await navigator.mediaDevices.getUserMedia({ audio: true }); 6971 } catch(err) { 6972 if (!navigator.mediaDevices) { 6973 dispatch("error", i18n("audio.no_device_support")); 6974 return; 6975 } 6976
6977 if (err instanceof DOMException && err.name == "NotAllowedError") { 6978 dispatch("error", i18n("audio.allow_recording_access")); 6979 return; 6980 } 6981 6982 throw err; 6983 } 6984 6985 if (stream == null) return; 6986 6987 if (streaming) { 6988 const [{ MediaRecorder, register }, { connect }] = await Promise.all(module_promises); 6989 await register(await connect()); 6990 recorder = new MediaRecorder(stream, { mimeType: "audio/wav" }); 6991 recorder.addEventListener("dataavailable", handle_chunk); 6992 } else { 6993 recorder = new MediaRecorder(stream); 6994 6995 recorder.addEventListener("dataavailable", event => { 6996 audio_chunks.push(event.data); 6997 }); 6998 6999 recorder.addEventListener("stop", async () => { 7000 $$invalidate(15, recording = false); 7001 await dispatch_blob(audio_chunks, "change"); 7002 await dispatch_blob(audio_chunks, "stop_recording"); 7003 audio_chunks = []; 7004 }); 7005 } 7006 7007 inited = true; 7008 } 7009 7010 async function handle_chunk(event) { 7011 let buffer = await event.data.arrayBuffer(); 7012 let payload = new Uint8Array(buffer); 7013 7014 if (!header) { 7015 $$invalidate(24, header = new Uint8Array(buffer.slice(0, NUM_HEADER_BYTES))); 7016 payload = new Uint8Array(buffer.slice(NUM_HEADER_BYTES)); 7017 } 7018 7019 if (pending) { 7020 pending_stream.push(payload); 7021 } else { 7022 let blobParts = [header].concat(pending_stream, [payload]); 7023 dispatch_blob(blobParts, "stream"); 7024 $$invalidate(25, pending_stream = []); 7025 } 7026 } 7027 7028 async function record() { 7029 $$invalidate(15, recording = true); 7030 dispatch("start_recording"); 7031 if (!inited) await prepare_audio(); 7032 $$invalidate(24, header = undefined); 7033 7034 if (streaming) { 7035 recorder.start(STREAM_TIMESLICE); 7036 } 7037 } 7038 7039 function clear() { 7040 dispatch("change", null); 7041 dispatch("clear"); 7042 $$invalidate(16, mode = ""); 7043 $$invalidate(1, value = null); 7044 } 7045 7046 function handle_load({ detail }) { 7047 $$invalidate(1, value = detail); 7048 dispatch("change", detail); 7049 dispatch("upload", detail); 7050 } 7051 7052 function stop() { 7053 $$invalidate(15, recording = false); 7054 7055 if (streaming) { 7056 dispatch("stop_recording"); 7057 recorder.stop(); 7058 7059 if (pending) { 7060 $$invalidate(26, submit_pending_stream_on_pending_end = true); 7061 } 7062 7063 dispatch_blob(audio_chunks, "stop_recording"); 7064 dispatch("clear"); 7065 $$invalidate(16, mode = ""); 7066 } 7067 } 7068 7069 function audiorecorder_mode_binding(value) { 7070 mode = value; 7071 $$invalidate(16, mode); 7072 } 7073 7074 function start_recording_handler(event) { 7075 bubble.call(this, $$self, event); 7076 } 7077 7078 function pause_recording_handler(event) { 7079 bubble.call(this, $$self, event); 7080 } 7081 7082 function stop_recording_handler(event) { 7083 bubble.call(this, $$self, event); 7084 } 7085 7086 function upload_1_dragging_binding(value) { 7087 dragging = value; 7088 $$invalidate(0, dragging); 7089 } 7090 7091 const error_handler = ({ detail }) => dispatch("error", detail); 7092 const edit_handler_1 = () =>
7092 $$invalidate(16, mode = "edit"); 7093 7094 function audioplayer_mode_binding(value) { 7095 mode = value; 7096 $$invalidate(16, mode); 7097 } 7098 7099 function stop_handler(event) { 7100 bubble.call(this, $$self, event); 7101 } 7102 7103 function play_handler(event) { 7104 bubble.call(this, $$self, event); 7105 } 7106 7107 function pause_handler(event) { 7108 bubble.call(this, $$self, event); 7109 } 7110 7111 function edit_handler(event) { 7112 bubble.call(this, $$self, event); 7113 } 7114 7115 function selectsource_active_source_binding(value) { 7116 active_source = value; 7117 $$invalidate(2, active_source); 7118 } 7119 7120 $$self.$$set = $$props => { 7121 if ('value' in $$props) $$invalidate(1, value = $$props.value); 7122 if ('label' in $$props) $$invalidate(3, label = $$props.label); 7123 if ('root' in $$props) $$invalidate(4, root = $$props.root); 7124 if ('show_label' in $$props) $$invalidate(5, show_label = $$props.show_label); 7125 if ('show_download_button' in $$props) $$invalidate(6, show_download_button = $$props.show_download_button); 7126 if ('sources' in $$props) $$invalidate(7, sources = $$props.sources); 7127 if ('pending' in $$props) $$invali
7127date(23, pending = $$props.pending); 7128 if ('streaming' in $$props) $$invalidate(8, streaming = $$props.streaming); 7129 if ('i18n' in $$props) $$invalidate(9, i18n = $$props.i18n); 7130 if ('waveform_settings' in $$props) $$invalidate(10, waveform_settings = $$props.waveform_settings); 7131 if ('trim_region_settings' in $$props) $$invalidate(11, trim_region_settings = $$props.trim_region_settings); 7132 if ('waveform_options' in $$props) $$invalidate(12, waveform_options = $$props.waveform_options); 7133 if ('dragging' in $$props) $$invalidate(0, dragging = $$props.dragging); 7134 if ('active_source' in $$props) $$invalidate(2, active_source = $$props.active_source); 7135 if ('handle_reset_value' in $$props) $$invalidate(13, handle_reset_value = $$props.handle_reset_value); 7136 if ('editable' in $$props) $$invalidate(14, editable = $$props.editable); 7137 if ('$$scope' in $$props) $$invalidate(41, $$scope = $$props.$$scope); 7138 }; 7139 7140 $$self.$$.update = () => { 7141 if ($$self.$$.dirty[0] & /*dragging*/ 1) { 7142 dispatch("drag", dragging); 7143 } 7144 7145 if ($$self.$$.dirty[0] & /*submit_pending_stream_on_pending_end, pending, header, pending_stream*/ 125829120) { 7146 if (submit_pending_stream_on_pending_end && pending === false) { 7147 $$invalidate(26, submit_pending_stream_on_pending_end = false); 7148 7149 if (header && pending_stream) { 7150 let blobParts = [header].concat(pending_stream); 7151 $$invalidate(25, pending_stream = []); 7152 dispatch_blob(blobParts, "stream"); 7153 } 7154 } 7155 } 7156 }; 7157 7158 return [ 7159 dragging, 7160 value, 7161 active_source, 7162 label, 7163 root, 7164 show_label, 7165 show_download_button, 7166 sources, 7167 streaming, 7168 i18n, 7169 waveform_settings, 7170 trim_region_settings, 7171 waveform_options, 7172 handle_reset_value, 7173 editable, 7174 recording, 7175 mode, 7176 dispatch, 7177 dispatch_blob, 7178 record, 7179 clear, 7180 handle_load, 7181 stop, 7182 pending, 7183 header, 7184 pending_stream, 7185 submit_pending_stream_on_pending_end, 7186 slots, 7187 audiorecorder_mode_binding, 7188 start_recording_handler, 7189 pause_recording_handler, 7190 stop_recording_handler, 7191 upload_1_dragging_binding, 7192 error_handler, 7193 edit_handler_1, 7194 audioplayer_mode_binding, 7195 stop_handler, 7196 play_handler, 7197 pause_handler, 7198 edit_handler, 7199 selectsource_active_source_binding, 7200 $$scope 7201 ]; 7202} 7203 7204class InteractiveAudio extends SvelteComponent$1 { 7205 constructor(options) { 7206 super(); 7207 7208 init$1( 7209 this, 7210 options, 7211 instance$1, 7212 create_fragment$1, 7213 safe_not_equal$1, 7214 { 7215 value: 1, 7216 label: 3, 7217 root: 4, 7218 show_label: 5, 7219 show_download_button: 6, 7220 sources: 7, 7221 pending: 23, 7222 streaming: 8, 7223 i18n: 9, 7224 waveform_settings: 10, 7225 trim_region_settings: 11, 7226 waveform_options: 12, 7227 dragging: 0, 7228 active_source: 2, 7229 handle_reset_value: 13, 7230 editable: 14 7231 }, 7232 null, 7233 [-1, -1] 7234 ); 7235 } 7236} 7237 7238const InteractiveAudio$1 = InteractiveAudio; 7239 7240/* home/runner/work/gradio/gradio/js/audio/Index.svelte generated by Svelte v4.2.2 */ 7241const { 7242 SvelteComponent, 7243 add_flush_callback, 7244 assign, 7245 bind, 7246 binding_callbacks, 7247 check_outros, 7248 create_component, 7249 destroy_component, 7250 detach, 7251 empty, 7252 flush, 7253 get_spread_object, 7254 get_spread_update, 7255 group_outros, 7256 init, 7257 insert, 7258 mount_component, 7259 safe_not_equal, 7260 space, 7261 transition_in, 7262 transition_out 7263} = window.__gradio__svelte__internal; 7264function create_else_block(ctx) { 7265 let block; 7266 let current; 7267 7268 block = new Block({ 7269 props: { 7270 variant: /*value*/ ctx[0] === null && /*active_source*/ ctx[20] === "upload" 7271 ? "dashed" 7272 : "solid", 7273 border_mode: /*dragging*/ ctx[21] ? "focus" : "base", 7274 padding: false, 7275 allow_overflow: false, 7276 elem_id: /*elem_id*/ ctx[2], 7277 elem_classes: /*elem_classes*/ ctx[3], 7278 visible: /*visible*/ ctx[4], 7279 container: /*container*/ ctx[10], 7280 scale: /*scale*/ ctx[11], 7281 min_width: /*min_width*/ ctx[12], 7282 $$slots: { default: [create_default_slot_1] }, 7283 $$scope: { ctx } 7284 } 7285 }); 7286 7287 return { 7288 c() { 7289 create_component(block.$$.fragment); 7290 }, 7291 m(target, anchor) { 7292 mount_component(block, target, anchor); 7293 current = true; 7294 }, 7295 p(ctx, dirty) { 7296 const block_changes = {}; 7297 7298 if (dirty[0] & /*value, active_source*/ 1048577) block_changes.variant = /*value*/ ctx[0] === null && /*active_source*/ ctx[20] === "upload" 7299 ? "dashed" 7300 : "solid"; 7301
7302 if (dirty[0] & /*dragging*/ 2097152) block_changes.border_mode = /*dragging*/ ctx[21] ? "focus" : "base"; 7303 if (dirty[0] & /*elem_id*/ 4) block_changes.elem_id = /*elem_id*/ ctx[2]; 7304 if (dirty[0] & /*elem_classes*/ 8) block_changes.elem_classes = /*elem_classes*/ ctx[3]; 7305 if (dirty[0] & /*visible*/ 16) block_changes.visible = /*visible*/ ctx[4]; 7306 if (dirty[0] & /*container*/ 1024) block_changes.container = /*container*/ ctx[10]; 7307 if (dirty[0] & /*scale*/ 2048) block_changes.scale = /*scale*/ ctx[11]; 7308 if (dirty[0] & /*min_width*/ 4096) block_changes.min_width = /*min_width*/ ctx[12]; 7309 7310 if (dirty[0] & /*label, show_label, show_download_button, value, root, sources, active_source, pending, streaming, editable, gradio, waveform_settings, waveform_options, dragging, loading_status*/ 8364995 | dirty[1] & /*$$scope*/ 262144) { 7311 block_changes.$$scope = { dirty, ctx }; 7312 } 7313 7314 block.$set(block_changes); 7315 }, 7316 i(local) { 7317 if (current) return; 7318 transition_in(block.$$.fragment, local); 7319 current = true; 7320 }, 7321 o(local) { 7322 transition_out(block.$$.fragment, local); 7323 current = false; 7324 }, 7325 d(detaching) { 7326 destroy_component(block, detaching); 7327 } 7328 }; 7329} 7330 7331// (88:0) {#if !interactive} 7332function create_if_block(ctx) { 7333 let block; 7334 let current; 7335 7336 block = new Block({ 7337 props: { 7338 variant: "solid", 7339 border_mode: /*dragging*/ ctx[21] ? "focus" : "base", 7340 padding: false, 7341 allow_overflow: false, 7342 elem_id: /*elem_id*/ ctx[2], 7343 elem_classes: /*elem_classes*/ ctx[3], 7344 visible: /*visible*/ ctx[4], 7345 container: /*container*/ ctx[10], 7346 scale: /*scale*/ ctx[11], 7347 min_width: /*min_width*/ ctx[12], 7348 $$slots: { default: [create_default_slot] }, 7349 $$scope: { ctx } 7350 } 7351 }); 7352 7353 return { 7354 c() { 7355 create_component(block.$$.fragment); 7356 }, 7357 m(target, anchor) { 7358 mount_component(block, target, anchor); 7359 current = true; 7360 }, 7361 p(ctx, dirty) { 7362 const block_changes = {}; 7363 if (dirty[0] & /*dragging*/ 2097152) block_changes.border_mode = /*dragging*/ ctx[21] ? "focus" : "base"; 7364 if (dirty[0] & /*elem_id*/ 4) block_changes.elem_id = /*elem_id*/ ctx[2]; 7365 if (dirty[0] & /*elem_classes*/ 8) block_changes.elem_classes = /*elem_classes*/ ctx[3]; 7366 if (dirty[0] & /*visible*/ 16) block_changes.visible = /*visible*/ ctx[4]; 7367 if (dirty[0] & /*container*/ 1024) block_changes.container = /*container*/ ctx[10]; 7368 if (dirty[0] & /*scale*/ 2048) block_changes.scale = /*scale*/ ctx[11]; 7369 if (dirty[0] & /*min_width*/ 4096) block_changes.min_width = /*min_width*/ ctx[12]; 7370 7371 if (dirty[0] & /*gradio, show_label, show_download_button, show_share_button, value, label, waveform_settings, waveform_options, editable, loading_status*/ 4842115 | dirty[1] & /*$$scope*/ 262144) { 7372 block_changes.$$scope = { dirty, ctx }; 7373 } 7374 7375 block.$set(block_changes); 7376 }, 7377 i(local) { 7378 if (current) return; 7379 transition_in(block.$$.fragment, local); 7380 current = true; 7381 }, 7382 o(local) { 7383 transition_out(block.$$.fragment, local); 7384 current = false; 7385 }, 7386 d(detaching) { 7387 destroy_component(block, detaching); 7388 } 7389 }; 7390} 7391 7392// (142:2) <InteractiveAudio {label} {show_label} {show_download_button} {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} {editable} 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")} on:upload={() => gradio.dispatch("upload")} on:clear={() => gradio.dispatch("clear")} on:error={handle_error} i18n={gradio.i18n} {waveform_settings} {waveform_options} {trim_region_settings} > 7393function create_default_slot_2(ctx) { 7394 let uploadtext; 7395 let current; 7396 7397 uploadtext = new UploadText({ 7398 props: { 7399 i18n: /*gradio*/ ctx[19].i18n, 7400 type: "audio" 7401 } 7402 }); 7403 7404 return { 7405 c() { 7406 create_component(uploadtext.$$.fragment); 7407 }, 7408 m(target, anchor) { 7409 mount_component(uploadtext, target, anchor); 7410 current = true; 7411 }, 7412 p(ctx, dirty) { 7413 const uploadtext_changes = {};
7414 if (dirty[0] & /*gradio*/ 524288) uploadtext_changes.i18n = /*gradio*/ ctx[19].i18n; 7415 uploadtext.$set(uploadtext_changes); 7416 }, 7417 i(local) { 7418 if (current) return; 7419 transition_in(uploadtext.$$.fragment, local); 7420 current = true; 7421 }, 7422 o(local) { 7423 transition_out(uploadtext.$$.fragment, local); 7424 current = false; 7425 }, 7426 d(detaching) { 7427 destroy_component(uploadtext, detaching); 7428 } 7429 }; 7430} 7431 7432// (125:1) <Block variant={value === null && active_source === "upload" ? "dashed" : "solid"} border_mode={dragging ? "focus" : "base"} padding={false} allow_overflow={false} {elem_id} {elem_classes} {visible} {container} {scale} {min_width} > 7433function create_default_slot_1(ctx) { 7434 let statustracker; 7435 let t; 7436 let interactiveaudio; 7437 let updating_dragging; 7438 let current; 7439 7440 const statustracker_spread_levels = [ 7441 { 7442 autoscroll: /*gradio*/ ctx[19].autoscroll 7443 }, 7444 { i18n: /*gradio*/ ctx[19].i18n }, 7445 /*loading_status*/ ctx[1] 7446 ]; 7447 7448 let statustracker_props = {}; 7449 7450 for (let i = 0; i < statustracker_spread_levels.length; i += 1) { 7451 statustracker_props = assign(statustracker_props, statustracker_spread_levels[i]); 7452 } 7453 7454 statustracker = new Static({ props: statustracker_props }); 7455 7456 function interactiveaudio_dragging_binding(value) { 7457 /*interactiveaudio_dragging_binding*/ ctx[34](value); 7458 } 7459 7460 let interactiveaudio_props = { 7461 label: /*label*/ ctx[7], 7462 show_label: /*show_label*/ ctx[9], 7463 show_download_button: /*show_download_button*/ ctx[13], 7464 value: /*value*/ ctx[0], 7465 root: /*root*/ ctx[8], 7466 sources: /*sources*/ ctx[6], 7467 active_source: /*active_source*/ ctx[20], 7468 pending: /*pending*/ ctx[17], 7469 streaming: /*streaming*/ ctx[18], 7470 handle_reset_value: /*handle_reset_value*/ ctx[23], 7471 editable: /*editable*/ ctx[15], 7472 i18n: /*gradio*/ ctx[19].i18n, 7473 waveform_settings: /*waveform_settings*/ ctx[22], 7474 waveform_options: /*waveform_options*/ ctx[16], 7475 trim_region_settings: /*trim_region_settings*/ ctx[24], 7476 $$slots: { default: [create_default_slot_2] }, 7477 $$scope: { ctx } 7478 }; 7479 7480 if (/*dragging*/ ctx[21] !== void 0) { 7481 interactiveaudio_props.dragging = /*dragging*/ ctx[21]; 7482 } 7483 7484 interactiveaudio = new InteractiveAudio$1({ props: interactiveaudio_props }); 7485 binding_callbacks.push(() => bind(interactiveaudio, 'dragging', interactiveaudio_dragging_binding)); 7486 interactiveaudio.$on("change", /*change_handler*/ ctx[35]); 7487 interactiveaudio.$on("stream", /*stream_handler*/ ctx[36]); 7488 interactiveaudio.$on("drag", /*drag_handler*/ ctx[37]); 7489 interactiveaudio.$on("edit", /*edit_handler*/ ctx[38]); 7490 interactiveaudio.$on("play", /*play_handler_1*/ ctx[39]); 7491 interactiveaudio.$on("pause", /*pause_handler_1*/ ctx[40]); 7492 interactiveaudio.$on("stop", /*stop_handler_1*/ ctx[41]); 7493 interactiveaudio.$on("start_recording", /*start_recording_handler*/ ctx[42]); 7494 interactiveaudio.$on("pause_recording", /*pause_recording_handler*/ ctx[43]); 7495 interactiveaudio.$on("stop_recording", /*stop_recording_handler*/ ctx[44]); 7496 interactiveaudio.$on("upload", /*upload_handler*/ ctx[45]); 7497 interactiveaudio.$on("clear", /*clear_handler*/ ctx[46]); 7498 interactiveaudio.$on("error", /*handle_error*/ ctx[25]); 7499 7500 return { 7501 c() { 7502 create_component(statustracker.$$.fragment); 7503 t = space(); 7504 create_component(interactiveaudio.$$.fragment); 7505 }, 7506 m(target, anchor) { 7507 mount_component(statustracker, target, anchor); 7508 insert(target, t, anchor); 7509 mount_component(interactiveaudio, target, anchor); 7510 current = true; 7511 }, 7512 p(ctx, dirty) { 7513 const statustracker_changes = (dirty[0] & /*gradio, loading_status*/ 524290) 7514 ? get_spread_update(statustracker_spread_levels, [ 7515 dirty[0] & /*gradio*/ 524288 && { 7516 autoscroll: /*gradio*/ ctx[19].autoscroll 7517 }, 7518 dirty[0] & /*gradio*/ 524288 && { i18n: /*gradio*/ ctx[19].i18n }, 7519 dirty[0] & /*loading_status*/ 2 && get_spread_object(/*loading_status*/ ctx[1]) 7520 ]) 7521 : {}; 7522 7523 statustracker.$set(statustracker_changes); 7524 const interactiveaudio_changes = {}; 7525 if (dirty[0] & /*label*/ 128) interactiveaudio_changes.label = /*label*/ ctx[7]; 7526 if (dirty[0] & /*show_label*/ 512) interactiveaudio_changes.show_label = /*show_label*/ ctx[9];
7527 if (dirty[0] & /*show_download_button*/ 8192) interactiveaudio_changes.show_download_button = /*show_download_button*/ ctx[13]; 7528 if (dirty[0] & /*value*/ 1) interactiveaudio_changes.value = /*value*/ ctx[0]; 7529 if (dirty[0] & /*root*/ 256) interactiveaudio_changes.root = /*root*/ ctx[8]; 7530 if (dirty[0] & /*sources*/ 64) interactiveaudio_changes.sources = /*sources*/ ctx[6]; 7531 if (dirty[0] & /*active_source*/ 1048576) interactiveaudio_changes.active_source = /*active_source*/ ctx[20]; 7532 if (dirty[0] & /*pending*/ 131072) interactiveaudio_changes.pending = /*pending*/ ctx[17]; 7533 if (dirty[0] & /*streaming*/ 262144) interactiveaudio_changes.streaming = /*streaming*/ ctx[18]; 7534 if (dirty[0] & /*editable*/ 32768) interactiveaudio_changes.editable = /*editable*/ ctx[15]; 7535 if (dirty[0] & /*gradio*/ 524288) interactiveaudio_changes.i18n = /*gradio*/ ctx[19].i18n; 7536 if (dirty[0] & /*waveform_settings*/ 4194304) interactiveaudio_changes.waveform_settings = /*waveform_settings*/ ctx[22]; 7537 if (dirty[0] & /*waveform_options*/ 65536) interactiveaudio_changes.waveform_options = /*waveform_options*/ ctx[16]; 7538 7539 if (dirty[0] & /*gradio*/ 524288 | dirty[1] & /*$$scope*/ 262144) { 7540 interactiveaudio_changes.$$scope = { dirty, ctx }; 7541 } 7542 7543 if (!updating_dragging && dirty[0] & /*dragging*/ 2097152) { 7544 updating_dragging = true; 7545 interactiveaudio_changes.dragging = /*dragging*/ ctx[21]; 7546 add_flush_callback(() => updating_dragging = false); 7547 } 7548 7549 interactiveaudio.$set(interactiveaudio_changes); 7550 }, 7551 i(local) { 7552 if (current) return; 7553 transition_in(statustracker.$$.fragment, local); 7554 transition_in(interactiveaudio.$$.fragment, local); 7555 current = true; 7556 }, 7557 o(local) { 7558 transition_out(statustracker.$$.fragment, local); 7559 transition_out(interactiveaudio.$$.fragment, local); 7560 current = false; 7561 }, 7562 d(detaching) { 7563 if (detaching) { 7564 detach(t); 7565 } 7566 7567 destroy_component(statustracker, detaching); 7568 destroy_component(interactiveaudio, detaching); 7569 } 7570 }; 7571} 7572 7573// (89:1) <Block variant={"solid"} border_mode={dragging ? "focus" : "base"} padding={false} allow_overflow={false} {elem_id} {elem_classes} {visible} {container} {scale} {min_width} > 7574function create_default_slot(ctx) { 7575 let statustracker; 7576 let t; 7577 let staticaudio; 7578 let current; 7579 7580 const statustracker_spread_levels = [ 7581 { 7582 autoscroll: /*gradio*/ ctx[19].autoscroll 7583 }, 7584 { i18n: /*gradio*/ ctx[19].i18n }, 7585 /*loading_status*/ ctx[1] 7586 ]; 7587 7588 let statustracker_props = {}; 7589 7590 for (let i = 0; i < statustracker_spread_levels.length; i += 1) { 7591 statustracker_props = assign(statustracker_props, statustracker_spread_levels[i]); 7592 } 7593 7594 statustracker = new Static({ props: statustracker_props }); 7595 7596 staticaudio = new StaticAudio$1({ 7597 props: { 7598 i18n: /*gradio*/ ctx[19].i18n, 7599 show_label: /*show_label*/ ctx[9], 7600 show_download_button: /*show_download_button*/ ctx[13], 7601 show_share_button: /*show_share_button*/ ctx[14], 7602 value: /*value*/ ctx[0], 7603 label: /*label*/ ctx[7], 7604 waveform_settings: /*waveform_settings*/ ctx[22], 7605 waveform_options: /*waveform_options*/ ctx[16], 7606 editable: /*editable*/ ctx[15] 7607 } 7608 }); 7609 7610 staticaudio.$on("share", /*share_handler*/ ctx[29]); 7611 staticaudio.$on("error", /*error_handler*/ ctx[30]); 7612 staticaudio.$on("play", /*play_handler*/ ctx[31]); 7613 staticaudio.$on("pause", /*pause_handler*/ ctx[32]); 7614 staticaudio.$on("stop", /*stop_handler*/ ctx[33]); 7615 7616 return { 7617 c() { 7618 create_component(statustracker.$$.fragment); 7619 t = space(); 7620 create_component(staticaudio.$$.fragment); 7621 }, 7622 m(target, anchor) { 7623 mount_component(statustracker, target, anchor); 7624 insert(target, t, anchor); 7625 mount_component(staticaudio, target, anchor); 7626 current = true; 7627 }, 7628 p(ctx, dirty) { 7629 const statustracker_changes = (dirty[0] & /*gradio, loading_status*/ 524290) 7630 ? get_spread_update(statustracker_spread_levels, [ 7631 dirty[0] & /*gradio*/ 524288 && { 7632 autoscroll: /*gradio*/ ctx[19].autoscroll 7633 }, 7634 dirty[0] & /*gradio*/ 524288 && { i18n: /*gradio*/ ctx[19].i18n }, 7635 dirty[0] & /*loading_status*/ 2 && get_spread_object(/*loading_status*/ ctx[1]) 7636 ]) 7637 : {}; 7638 7639 statustracker.$set(statustracker_changes); 7640 const staticaudio_changes = {};
7641 if (dirty[0] & /*gradio*/ 524288) staticaudio_changes.i18n = /*gradio*/ ctx[19].i18n; 7642 if (dirty[0] & /*show_label*/ 512) staticaudio_changes.show_label = /*show_label*/ ctx[9]; 7643 if (dirty[0] & /*show_download_button*/ 8192) staticaudio_changes.show_download_button = /*show_download_button*/ ctx[13]; 7644 if (dirty[0] & /*show_share_button*/ 16384) staticaudio_changes.show_share_button = /*show_share_button*/ ctx[14]; 7645 if (dirty[0] & /*value*/ 1) staticaudio_changes.value = /*value*/ ctx[0]; 7646 if (dirty[0] & /*label*/ 128) staticaudio_changes.label = /*label*/ ctx[7]; 7647 if (dirty[0] & /*waveform_settings*/ 4194304) staticaudio_changes.waveform_settings = /*waveform_settings*/ ctx[22]; 7648 if (dirty[0] & /*waveform_options*/ 65536) staticaudio_changes.waveform_options = /*waveform_options*/ ctx[16]; 7649 if (dirty[0] & /*editable*/ 32768) staticaudio_changes.editable = /*editable*/ ctx[15]; 7650 staticaudio.$set(staticaudio_changes); 7651 }, 7652 i(local) { 7653 if (current) return; 7654 transition_in(statustracker.$$.fragment, local); 7655 transition_in(staticaudio.$$.fragment, local); 7656 current = true; 7657 }, 7658 o(local) { 7659 transition_out(statustracker.$$.fragment, local); 7660 transition_out(staticaudio.$$.fragment, local); 7661 current = false; 7662 }, 7663 d(detaching) { 7664 if (detaching) { 7665 detach(t); 7666 } 7667 7668 destroy_component(statustracker, detaching); 7669 destroy_component(staticaudio, detaching); 7670 } 7671 }; 7672} 7673 7674function create_fragment(ctx) { 7675 let current_block_type_index; 7676 let if_block; 7677 let if_block_anchor; 7678 let current; 7679 const if_block_creators = [create_if_block, create_else_block]; 7680 const if_blocks = []; 7681 7682 function select_block_type(ctx, dirty) { 7683 if (!/*interactive*/ ctx[5]) return 0; 7684 return 1; 7685 } 7686 7687 current_block_type_index = select_block_type(ctx); 7688 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 7689 7690 return { 7691 c() { 7692 if_block.c(); 7693 if_block_anchor = empty(); 7694 }, 7695 m(target, anchor) { 7696 if_blocks[current_block_type_index].m(target, anchor); 7697 insert(target, if_block_anchor, anchor); 7698 current = true; 7699 }, 7700 p(ctx, dirty) { 7701 let previous_block_index = current_block_type_index; 7702 current_block_type_index = select_block_type(ctx); 7703 7704 if (current_block_type_index === previous_block_index) { 7705 if_blocks[current_block_type_index].p(ctx, dirty); 7706 } else { 7707 group_outros(); 7708 7709 transition_out(if_blocks[previous_block_index], 1, 1, () => { 7710 if_blocks[previous_block_index] = null; 7711 }); 7712 7713 check_outros(); 7714 if_block = if_blocks[current_block_type_index]; 7715 7716 if (!if_block) { 7717 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 7718 if_block.c(); 7719 } else { 7720 if_block.p(ctx, dirty); 7721 } 7722 7723 transition_in(if_block, 1); 7724 if_block.m(if_block_anchor.parentNode, if_block_anchor); 7725 } 7726 }, 7727 i(local) { 7728 if (current) return; 7729 transition_in(if_block); 7730 current = true; 7731 }, 7732 o(local) { 7733 transition_out(if_block); 7734 current = false; 7735 }, 7736 d(detaching) { 7737 if (detaching) { 7738 detach(if_block_anchor); 7739 } 7740 7741 if_blocks[current_block_type_index].d(detaching); 7742 } 7743 }; 7744} 7745 7746function instance($$self, $$props, $$invalidate) { 7747 let { elem_id = "" } = $$props; 7748 let { elem_classes = [] } = $$props; 7749 let { visible = true } = $$props; 7750 let { interactive } = $$props; 7751 let { value = null } = $$props; 7752 let { sources } = $$props; 7753 let { label } = $$props; 7754 let { root } = $$props; 7755 let { show_label } = $$props; 7756 let { container = true } = $$props; 7757 let { scale = null } = $$props; 7758 let { min_width = undefined } = $$props; 7759 let { loading_status } = $$props; 7760 let { autoplay = false } = $$props; 7761 let { show_download_button } = $$props; 7762 let { show_share_button = false } = $$props; 7763 let { editable = true } = $$props; 7764 let { waveform_options = {} } = $$props; 7765 let { pending } = $$props; 7766 let { streaming } = $$props; 7767 let { gradio } = $$props; 7768 let old_value = null; 7769 let active_source; 7770 let initial_value = value; 7771 7772 const handle_reset_value = () => { 7773 if (initial_value === null || value === initial_value) { 7774 return; 7775 } 7776
7777 $$invalidate(0, value = initial_value); 7778 }; 7779 7780 let dragging; 7781 let waveform_settings; 7782 let color_accent = getComputedStyle(document.documentElement).getPropertyValue("--color-accent"); 7783 7784 const trim_region_settings = { 7785 color: waveform_options.trim_region_color, 7786 drag: true, 7787 resize: true 7788 }; 7789 7790 function set_trim_region_colour() { 7791 document.documentElement.style.setProperty("--trim-region-color", trim_region_settings.color || color_accent); 7792 } 7793 7794 set_trim_region_colour(); 7795 7796 function handle_error({ detail }) { 7797 const [level, status] = detail.includes("Invalid file type") 7798 ? ["warning", "complete"] 7799 : ["error", "error"]; 7800 7801 $$invalidate(1, loading_status = loading_status || {}); 7802 $$invalidate(1, loading_status.status = status, loading_status); 7803 $$invalidate(1, loading_status.message = detail, loading_status); 7804 gradio.dispatch(level, detail); 7805 } 7806 7807 const share_handler = e => gradio.dispatch("share", e.detail); 7808 const error_handler = e => gradio.dispatch("error", e.detail); 7809 const play_handler = () => gradio.dispatch("play"); 7810 const pause_handler = () => gradio.dispatch("pause"); 7811 const stop_handler = () => gradio.dispatch("stop"); 7812 7813 function interactiveaudio_dragging_binding(value) { 7814 dragging = value; 7815 $$invalidate(21, dragging); 7816 } 7817 7818 const change_handler = ({ detail }) =>
7818 $$invalidate(0, value = detail); 7819 7820 const stream_handler = ({ detail }) => { 7821 $$invalidate(0, value = detail); 7822 gradio.dispatch("stream", value); 7823 }; 7824 7825 const drag_handler = ({ detail }) => $$invalidate(21, dragging = detail); 7826 const edit_handler = () => gradio.dispatch("edit"); 7827 const play_handler_1 = () => gradio.dispatch("play"); 7828 const pause_handler_1 = () => gradio.dispatch("pause"); 7829 const stop_handler_1 = () => gradio.dispatch("stop"); 7830 const start_recording_handler = () => gradio.dispatch("start_recording"); 7831 const pause_recording_handler = () => gradio.dispatch("pause_recording"); 7832 const stop_recording_handler = e => gradio.dispatch("stop_recording"); 7833 const upload_handler = () => gradio.dispatch("upload"); 7834 const clear_handler = () => gradio.dispatch("clear"); 7835 7836 $$self.$$set = $$props => { 7837 if ('elem_id' in $$props) $$invalidate(2, elem_id = $$props.elem_id); 7838 if ('elem_classes' in $$props) $$invalidate(3, elem_classes = $$props.elem_classes); 7839 if ('visible' in $$props) $$invalidate(4, visible = $$props.visible);
7840 if ('interactive' in $$props) $$invalidate(5, interactive = $$props.interactive); 7841 if ('value' in $$props) $$invalidate(0, value = $$props.value); 7842 if ('sources' in $$props) $$invalidate(6, sources = $$props.sources); 7843 if ('label' in $$props) $$invalidate(7, label = $$props.label); 7844 if ('root' in $$props) $$invalidate(8, root = $$props.root); 7845 if ('show_label' in $$props) $$invalidate(9, show_label = $$props.show_label); 7846 if ('container' in $$props) $$invalidate(10, container = $$props.container); 7847 if ('scale' in $$props) $$invalidate(11, scale = $$props.scale); 7848 if ('min_width' in $$props) $$invalidate(12, min_width = $$props.min_width); 7849 if ('loading_status' in $$props) $$invalidate(1, loading_status = $$props.loading_status); 7850 if ('autoplay' in $$props) $$invalidate(26, autoplay = $$props.autoplay); 7851 if ('show_download_button' in $$props) $$invalidate(13, show_download_button = $$props.show_download_button); 7852 if ('show_share_button' in $$props) $$invalidate(14, show_share_button = $$props.show_share_button);
7853 if ('editable' in $$props) $$invalidate(15, editable = $$props.editable); 7854 if ('waveform_options' in $$props) $$invalidate(16, waveform_options = $$props.waveform_options); 7855 if ('pending' in $$props) $$invalidate(17, pending = $$props.pending); 7856 if ('streaming' in $$props) $$invalidate(18, streaming = $$props.streaming); 7857 if ('gradio' in $$props) $$invalidate(19, gradio = $$props.gradio); 7858 }; 7859 7860 $$self.$$.update = () => { 7861 if ($$self.$$.dirty[0] & /*value, initial_value*/ 268435457) { 7862 if (value && initial_value === null) { 7863 $$invalidate(28, initial_value = value); 7864 } 7865 } 7866 7867 if ($$self.$$.dirty[0] & /*value, old_value, gradio*/ 134742017) { 7868 { 7869 if (JSON.stringify(value) !== JSON.stringify(old_value)) { 7870 $$invalidate(27, old_value = value); 7871 gradio.dispatch("change"); 7872 } 7873 } 7874 } 7875 7876 if ($$self.$$.dirty[0] & /*active_source, sources*/ 1048640) { 7877 if (!active_source && sources) { 7878 $$invalidate(20, active_source = sources[0]); 7879 } 7880 } 7881 7882 if ($$self.$$.dirty[0] & /*waveform_options, autoplay*/ 67174400) { 7883 $$invalidate(22, waveform_settings = { 7884 height: 50, 7885 waveColor: waveform_options.waveform_color || "#9ca3af", 7886 progressColor: waveform_options.waveform_progress_color || color_accent, 7887 barWidth: 2, 7888 barGap: 3, 7889 cursorWidth: 2, 7890 cursorColor: "#ddd5e9", 7891 autoplay, 7892 barRadius: 10, 7893 dragToSeek: true, 7894 normalize: true, 7895 minPxPerSec: 20, 7896 mediaControls: waveform_options.show_controls, 7897 sampleRate: waveform_options.sample_rate || 44100 7898 }); 7899 } 7900 }; 7901 7902 return [ 7903 value, 7904 loading_status, 7905 elem_id, 7906 elem_classes, 7907 visible, 7908 interactive, 7909 sources, 7910 label, 7911 root, 7912 show_label, 7913 container, 7914 scale, 7915 min_width, 7916 show_download_button, 7917 show_share_button, 7918 editable, 7919 waveform_options, 7920 pending, 7921 streaming, 7922 gradio, 7923 active_source, 7924 dragging, 7925 waveform_settings, 7926 handle_reset_value, 7927 trim_region_settings, 7928 handle_error, 7929 autoplay, 7930 old_value, 7931 initial_value, 7932 share_handler, 7933 error_handler, 7934 play_handler, 7935 pause_handler, 7936 stop_handler, 7937 interactiveaudio_dragging_binding, 7938 change_handler, 7939 stream_handler, 7940 drag_handler, 7941 edit_handler, 7942 play_handler_1, 7943 pause_handler_1, 7944 stop_handler_1, 7945 start_recording_handler, 7946 pause_recording_handler, 7947 stop_recording_handler, 7948 upload_handler, 7949 clear_handler 7950 ]; 7951} 7952 7953class Index extends SvelteComponent { 7954 constructor(options) { 7955 super(); 7956 7957 init( 7958 this, 7959 options, 7960 instance, 7961 create_fragment, 7962 safe_not_equal, 7963 { 7964 elem_id: 2, 7965 elem_classes: 3, 7966 visible: 4, 7967 interactive: 5, 7968 value: 0, 7969 sources: 6, 7970 label: 7, 7971 root: 8, 7972 show_label: 9, 7973 container: 10, 7974 scale: 11, 7975 min_width: 12, 7976 loading_status: 1, 7977 autoplay: 26, 7978 show_download_button: 13, 7979 show_share_button: 14, 7980 editable: 15, 7981 waveform_options: 16, 7982 pending: 17, 7983 streaming: 18, 7984 gradio: 19 7985 }, 7986 null, 7987 [-1, -1] 7988 ); 7989 } 7990 7991 get elem_id() { 7992 return this.$$.ctx[2]; 7993 } 7994 7995 set elem_id(elem_id) { 7996 this.$$set({ elem_id }); 7997 flush(); 7998 } 7999 8000 get elem_classes() { 8001 return this.$$.ctx[3]; 8002 } 8003 8004 set elem_classes(elem_classes) { 8005 this.$$set({ elem_classes }); 8006 flush(); 8007 } 8008 8009 get visible() { 8010 return this.$$.ctx[4]; 8011 } 8012 8013 set visible(visible) { 8014 this.$$set({ visible }); 8015 flush(); 8016 } 8017 8018 get interactive() { 8019 return this.$$.ctx[5]; 8020 } 8021 8022 set interactive(interactive) { 8023 this.$$set({ interactive }); 8024 flush(); 8025 } 8026 8027 get value() { 8028 return this.$$.ctx[0]; 8029 } 8030 8031 set value(value) { 8032 this.$$set({ value }); 8033 flush(); 8034 } 8035 8036 get sources() { 8037 return this.$$.ctx[6]; 8038 } 8039 8040 set sources(sources) { 8041 this.$$set({ sources }); 8042 flush(); 8043 } 8044 8045 get label() { 8046 return this.$$.ctx[7]; 8047 } 8048 8049 set label(label) { 8050 this.$$set({ label }); 8051 flush(); 8052 } 8053 8054 get root() { 8055 return this.$$.ctx[8]; 8056 } 8057 8058 set root(root) { 8059 this.$$set({ root }); 8060 flush(); 8061 } 8062 8063 get show_label() { 8064 return this.$$.ctx[9]; 8065 } 8066 8067 set show_label(show_label) { 8068 this.$$set({ show_label }); 8069 flush(); 8070 } 8071 8072 get container() { 8073 return this.$$.ctx[10]; 8074 } 8075 8076 set container(container) { 8077 this.$$set({ container }); 8078 flush(); 8079 } 8080 8081 get scale() { 8082 return this.$$.ctx[11]; 8083 } 8084 8085 set scale(scale) { 8086 this.$$set({ scale }); 8087 flush(); 8088 } 8089 8090 get min_width() { 8091 return this.$$.ctx[12]; 8092 } 8093 8094 set min_width(min_width) { 8095 this.$$set({ min_width }); 8096 flush(); 8097 } 8098 8099 get loading_status() { 8100 return this.$$.ctx[1]; 8101 } 8102 8103 set loading_status(loading_status) { 8104 this.$$set({ loading_status }); 8105 flush(); 8106 } 8107 8108 get autoplay() { 8109 return this.$$.ctx[26]; 8110 } 8111 8112 set autoplay(autoplay) { 8113 this.$$set({ autoplay }); 8114 flush(); 8115 } 8116 8117 get show_download_button() { 8118 return this.$$.ctx[13]; 8119 } 8120 8121 set show_download_button(show_download_button) { 8122 this.$$set({ show_download_button }); 8123 flush(); 8124 } 8125 8126 get show_share_button() { 8127 return this.$$.ctx[14]; 8128 } 8129 8130 set show_share_button(show_share_button) { 8131 this.$$set({ show_share_button }); 8132 flush(); 8133 } 8134 8135 get editable() { 8136 return this.$$.ctx[15]; 8137 } 8138 8139 set editable(editable) { 8140 this.$$set({ editable }); 8141 flush(); 8142 } 8143 8144 get waveform_options() { 8145 return this.$$.ctx[16]; 8146 } 8147 8148 set waveform_options(waveform_options) { 8149 this.$$set({ waveform_options }); 8150 flush(); 8151 } 8152 8153 get pending() { 8154 return this.$$.ctx[17]; 8155 } 8156 8157 set pending(pending) { 8158 this.$$set({ pending }); 8159 flush(); 8160 } 8161 8162 get streaming() { 8163 return this.$$.ctx[18]; 8164 } 8165 8166 set streaming(streaming) { 8167 this.$$set({ streaming }); 8168 flush(); 8169 } 8170 8171 get gradio() { 8172 return this.$$.ctx[19]; 8173 } 8174 8175 set gradio(gradio) { 8176 this.$$set({ gradio }); 8177 flush(); 8178 } 8179} 8180 8181const Index$1 = Index; 8182 8183export { InteractiveAudio$1 as BaseInteractiveAudio, AudioPlayer$1 as BasePlayer, StaticAudio$1 as BaseStaticAudio, Index$1 as default }; 8184//# sourceMappingURL=index-156f9e2c.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.