Hugging Face's logo

Spaces:
djwugee
/
sf-e3b
Running

App Files Community
djwugee commited on
Commit
f9dccbc
·
verified ·
1 Parent(s): deda4f4

Add 2 files

Browse files
Files changed (2) hide show
  1. app.js +78 -0
  2. index.html +8 -19
app.js ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { WaveSurfer } from "https://unpkg.com/wavesurfer.js";
2
+
3
+ const waveform = document.querySelector("waveform");
4
+ const audioFiles = [];
5
+
6
+ function playAudioClip(clipIndex) {
7
+ const clip = audioFiles[clipIndex];
8
+ waveform.waveSurfer.mute();
9
+ waveform.waveSurfer.play();
10
+ waveform.waveSurfer.on("audioprocess", (event) => {
11
+ if (event.clipIndex !== clipIndex) {
12
+ waveform.waveSurfer.pause();
13
+ waveform.waveSurfer.mute();
14
+ }
15
+ });
16
+ }
17
+
18
+ function stopAudioClip() {
19
+ waveform.waveSurfer.pause();
20
+ }
21
+
22
+ function addAudioClip(blob) {
23
+ const id = audioFiles.length;
24
+ audioFiles[id] = new WaveSurfer(blob, `audio ${id}`);
25
+ waveform.append(audioFiles[id].amplitudeNode);
26
+ }
27
+
28
+ function initWaveform() {
29
+ const wavesurfer = new WaveSurfer({
30
+ container: waveform.querySelector(".waveform"),
31
+ });
32
+ wavesurfer.on("audioprocess", (event) => {
33
+ const clipIndex = event.clipIndex;
34
+ if (clipIndex !== undefined) {
35
+ const clip = audioFiles[clipIndex];
36
+ if (event.type === "mute") {
37
+ clip.mute();
38
+ } else {
39
+ clip.play();
40
+ }
41
+ }
42
+ });
43
+ return wavesurfer;
44
+ }
45
+
46
+ function initAudioClips() {
47
+ audioFiles.forEach((clip) => {
48
+ addAudioClip(clip);
49
+ });
50
+ }
51
+
52
+ function main() {
53
+ const uploadButton = document.querySelector("button");
54
+ const audioInput = document.createElement("input");
55
+ audioInput.type = "file";
56
+ audioInput.multiple = "multiple";
57
+ audioInput.accept = "audio/*";
58
+ uploadButton.addEventListener("click", () => {
59
+ audioInput.click();
60
+ });
61
+ audioInput.onchange = async () => {
62
+ if (audioInput.files.length) {
63
+ for (const file of audioInput.files) {
64
+ const url = await createObjectURL(file);
65
+ const blob = new Blob(url, { type: file.type });
66
+ addAudioClip(blob);
67
+ }
68
+ }
69
+ };
70
+ }
71
+
72
+ function createObjectURL(file) {
73
+ const url = URL.createObjectURL(file);
74
+ return url;
75
+ }
76
+
77
+ main();
78
+ })
index.html CHANGED
@@ -1,19 +1,8 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
1
+ <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Multitrack Audio Editor</title></head>
2
+ <body>
3
+ <div class="prose">
4
+ <h1>Multitrack Audio Editor</h1>
5
+ <button class="btn btn-primary">Upload Audio</button><waveform class="w-full h-screen"></waveform>
6
+ </div>
7
+ </body>
8
+ </html>