| <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>Wavesurfer</title></head><body style="min-height: 100vh; font-family: sans-serif;padding: 20px; background-color: #f7f7f7;"> | |
| <div> | |
| <div x-data="{ activeTrack: null }"> | |
| <div> | |
| <h1>Wavesurfer</h1> | |
| <div class="mt-4"> | |
| <button class="btn">Add track</button> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="btn" @click="play"> | |
| <svg class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| <button class="btn ml-2" @click="stop"> | |
| <svg class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8zM4 5a2 2 0 012-2h4a2 2 0 012 2v6H4V5z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="mt-6 flex flex-wrap justify-around"> | |
| <div v-for="(track, key) in tracks" :class="[key == activeTrack ? 'bg-gray-200' : '']"> | |
| <button class="btn w-1/2 text-left pr-2" @click="activeTrack = key">{{ track.name }}</button> | |
| <div class="mt-4 -mx-2 flex justify-between items-center"> | |
| <label>Solo</label> | |
| <input class="ml-2 mr-4" type="checkbox" :checked="track.solo" @input="track.solo = !track.solo" /> | |
| <label>Mute</label> | |
| <input class="ml-2 mr-4" type="checkbox" :checked="track.mute" @input="track.mute = !track.mute" /> | |
| <label>Pan</label> | |
| <input class="ml-2 mr-4" type="range" min="0" max="1" step="0.05" :value="track.pan" @input="track.pan = (event.target.value)" /> | |
| <label>Volume</label> | |
| <input class="ml-2 mr-4" type="range" min="0" max="1" step="0.05" :value="track.gain" @input="track.gain = (event.target.value)" /> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body></html> |