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