Spaces:

djwugee
/

sf-ec7

Configuration error

App Files Files Community

djwugee commited on Mar 11

Commit

cd95f47

•

1 Parent(s): 614e38b

Add 5 files

Browse files

Files changed (5) hide show

README.md +21 -11
README.mdfileyouneedtousethefollowing +5 -0
app.js +52 -0
index.html +1 -19
style.css(TailwindCSS) +228 -0

README.md CHANGED Viewed

@@ -1,11 +1,21 @@
----
-title: Sf Ec7
-emoji: ⚡
-colorFrom: blue
-colorTo: red
-sdk: static
-pinned: false
-license: mit
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+<readme>
+**Multitrack Audio Editor**
+Multitrack Audio Editor is a simple audio editor built with wavesurfer.js and Alpine.js. It allows you to load multiple audio tracks, display the waveform, timeline, and playback controls. With the ability to mute/solo individual tracks, the user can mix and match audio to create a multitrack masterpiece.
+## Preview
+![Multitrack Audio Editor]("https://i.imgur.com/mLxOfQE.png")
+## Features
+* Load multiple audio tracks.
+* Display waveform, timeline, and playback controls.
+* Add mute/solo tracks features.
+* Customizable design.
+## Installation
+1. Clone the repository
+   `git clone https://github.com/kcone42/multitrack-audio-editor.git`

README.mdfileyouneedtousethefollowing ADDED Viewed

	@@ -0,0 +1,5 @@

+npm run serve
+npm run build
+npm run test

app.js ADDED Viewed

	@@ -0,0 +1,52 @@

+import WaveSurfer from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/plugin/wavesurfer.multitrack.min.js'
+import ThreeJs from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js'
+import WaveSurferCanvas from 'https://www.npmjs.com/package/wavesurfer.js'
+import TailwindTheme from 'https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio'
+const wavesurfer = new WaveSurfer.create({
+ container: '#wavesurfer-container',
+ waveColor: '#69D2E7',
+ progressColor: '#69D2E7',
+ cursorColor: '#fff',
+ barHeight: 1,
+ cursorWidth: 0.1,
+ hideScrollbar: true,
+})
+const canvasEl = document.getElementById('wavesurfer-canvas')
+const wavesurferCanvas = new WaveSurferCanvas(canvasEl, wavesurfer)
+const threeJs = new ThreeJs.Scene()
+const geometry = new ThreeJs.BoxGeometry(1, 1, 1)
+const material = new ThreeJs.MeshBasicMaterial({ color: 0x00ff00 })
+const cube = new ThreeJs.Mesh(geometry, material)
+cube.position.z = -1
+threeJs.add(cube)
+const renderingElement = document.getElementById('rendering')
+if (renderingElement) {
+ threeJs.renderingElement = renderingElement
+ renderingElement.appendChild(threeJs.canvas)
+}
+wavesurfer.on('ready', () => {
+ const soundSource = new ThreeJs.AudioDevice()
+ soundSource.setBuffer(wavesurferCanvas.wavesurfer.getSoundSource())
+ threeJs.add(soundSource)
+ soundSource.play()
+})
+const main = async () => {
+ await wavesurferCanvas.load(
+    'https://api.soundcloud.com/tracks/293'
+ )
+ wavesurfer.load('https://api.soundcloud.com/tracks/305')
+ document.body.style.display = 'flex'
+ document.body.style.flexDirection = 'column'
+ document.body.style.alignItems = 'center'
+ document.body.style.justifyContent = 'center'
+ document.body.style.height = `${wavesurfer.options.container.clientHeight}px`
+ document.body.style.width = `${wavesurfer.options.container.clientWidth}px`
+}
+main()

index.html CHANGED Viewed

@@ -1,19 +1 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>


1	+ <html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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><body><div class="wavesurfer-container"><div class="wavesurfer-multitrack"><canvas id="wavesurfer-canvas"></canvas></div></div><div class="timeline"></div><div class="controls"></div><div class="playback-controls"></div></body></html>

style.css(TailwindCSS) ADDED Viewed

	@@ -0,0 +1,228 @@

+<<< erathemesruby-dark.css >>>
+:root {
+ --green: #36B37E;
+ --green-dark: #58A19F;
+ --green-darker: #1D0606;
+ --green-light: #C9EDE5;
+ --blue: #3498db;
+ --blue-dark: #219ebc;
+ --blue-darker: #001f3f;
+ --red: #F2006A;
+ --red-dark: #001b4a;
+ --red-darker: #583ca9;
+ --gray: #CFD8DC;
+}
+checkbox,
+label,
+input,
+textarea {
+ appearance: none;
+ box-sizing: border-box;
+ outline: none;
+ margin: 0;
+ padding: 0;
+ cursor: pointer;
+}
+button,
+a {
+ appearance: none;
+ font-family: "Push";
+ font-size: 1rem;
+ border-radius: 4px;
+ box-shadow: 0 0 0 2px var(--none-color);
+}
+.button1,
+.button2,
+.button3 {
+ font-size: 1.2rem;
+ width: 300px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: #fff;
+ margin: 20px auto;
+ cursor: pointer;
+ background: linear-gradient(to right, var(--blue), var(--light-color));
+}
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 60px;
+}
+.buf {
+ margin: 20px;
+}
+.control {
+ height: 100%;
+ position: relative;
+ border: 1px solid rgb(123, 123, 123);
+}
+.control::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ height: 10%;
+ background-color: #fff;
+ transform: translateY(-50%);
+ filter: brightness(1.5);
+}
+.track {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border: 1px solid rgb(123, 123, 123);
+ padding: 10px;
+}
+.track::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 10px;
+ background-color: #fff;
+ z-index: 4;
+}
+.track::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ box-shadow: inset 0 0 20px #000;
+ z-index: 5;
+ filter: brightness(0.5);
+}
+.track.mute::after {
+ background-color: #eee;
+}
+.track.solo::after {
+ background-color: #eee;
+}
+.play {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 10px;
+ height: 10px;
+ background-color: #fff;
+ border: 1px solid rgb(123, 123, 123);
+ z-index: 11;
+ box-shadow: inset 0 0 10px #000;
+ transform: translate(-50%, -50%);
+}
+.slider {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 10px;
+ margin-top: -5px;
+ transform: translate(-50%, -50%);
+}
+.slider::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ height: 10px;
+ background-color: #fff;
+ z-index: 12;
+ box-shadow: inset 0 0 10px #000;
+}
+.slider::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 10px;
+ height: 10px;
+ background-color: #fff;
+ box-shadow: inset 0 0 10px #000;
+ transform: translate(-50%, -50%);
+}
+.mute,
+.solo {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ box-shadow: inset 0 0 20px #000;
+ z-index: 1;
+}
+.mute {
+ margin-bottom: 10px;
+}
+.solo {
+ margin-top: 10px;
+}
+.mute::after,
+.solo::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ height: 10px;
+ background-color: #fff;
+ z-index: 12;
+ box-shadow: inset 0 0 10px #000;
+}
+.mute::before,
+.solo::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 10px;
+ height: 10px;
+ background-color: #fff;
+ box-shadow: inset 0 0 10px #000;
+ transform: translate(-50%, -50%);
+}
+.track.mute {
+ .slider,
+ .play {
+    background-color: red;
+ }
+}
+.track.solo {
+ .slider,
+ .play {
+    background-color: green;
+ }
+}