146 lines
3.0 KiB
Vue
146 lines
3.0 KiB
Vue
<template>
|
|
<div class="layout fixed z-40">
|
|
<div class="disc bg-slate-900" id="disc">
|
|
<div class="absolute top-1/2 right-8 size-5 rounded-full bg-esyellow">
|
|
</div>
|
|
<div class="disc-label rounded-full bg-cover bg-center">
|
|
</div>
|
|
<div class="disc-middle">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="control fixed bottom-0 z-50">
|
|
<button class="control button rewind" id="rewind"><<</button>
|
|
<button class="control button toggle" id="playToggle">power</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Disc from '@/platine-tools/disc';
|
|
import Sampler from '@/platine-tools/sampler';
|
|
import Controls from '@/platine-tools/controls';
|
|
|
|
onMounted(async () => {
|
|
const disc = new Disc(document.querySelector('#disc')!)
|
|
const sampler = new Sampler()
|
|
|
|
const controls = new Controls({
|
|
toggleButton: document.querySelector('#playToggle') as HTMLButtonElement,
|
|
rewindButton: document.querySelector('#rewind') as HTMLButtonElement,
|
|
})
|
|
|
|
await sampler.loadTrack('https://files.erudi.fr/music/2004011815__connie_francis__siboney.mp3')
|
|
|
|
controls.isDisabled = false
|
|
|
|
disc.setDuration(sampler.duration)
|
|
|
|
disc.start()
|
|
|
|
disc.callbacks.onStop = () => sampler.pause()
|
|
|
|
disc.callbacks.onDragEnded = () => {
|
|
if (!controls.isPlaying) {
|
|
return
|
|
}
|
|
|
|
sampler.play(disc.secondsPlayed)
|
|
}
|
|
|
|
disc.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
|
|
sampler.updateSpeed(playbackSpeed, isReversed, secondsPlayed)
|
|
}
|
|
|
|
controls.callbacks.onIsplayingChanged = (isPlaying) => {
|
|
if (isPlaying) {
|
|
disc.powerOn()
|
|
sampler.play(disc.secondsPlayed)
|
|
} else {
|
|
disc.powerOff()
|
|
}
|
|
}
|
|
|
|
controls.callbacks.onRewind = () => {
|
|
disc.rewind()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.layout {
|
|
width: 100vw;
|
|
height: 100vw;
|
|
max-width: 500px;
|
|
max-height: 500px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.disc {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
cursor: grab;
|
|
}
|
|
|
|
.disc.is-scratching {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.disc-label {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
background-size: cover;
|
|
width: 45%;
|
|
aspect-ratio: 1/1;
|
|
background: no-repeat url(/logo.svg) center center;
|
|
background-size: cover;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.disc-middle {
|
|
--dim: 10px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 10px;
|
|
height: 10px;
|
|
background: rgb(26, 26, 26);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.button {
|
|
border-radius: 0;
|
|
border: none;
|
|
background: rgb(69, 69, 69);
|
|
font-size: 0.75rem;
|
|
padding: 0.4rem;
|
|
color: #fff;
|
|
line-height: 1.3;
|
|
cursor: pointer;
|
|
will-change: box-shadow;
|
|
transition:
|
|
box-shadow 0.2s ease-out,
|
|
transform 0.05s ease-in;
|
|
}
|
|
|
|
.button.is-active {
|
|
transform: translate(1px, 2px);
|
|
}
|
|
|
|
.button[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|