Skip to content

Instantly share code, notes, and snippets.

@tq-bit
Last active Apr 13, 2022
Embed
What would you like to do?
Empty boilerplate for an audio player Vue component
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import iPlay from './icons/iPlay.vue';
import iPause from './icons/iPause.vue';
const DEFAULT_AUDIO_ADDRESS = 'https://www.americanrhetoric.com/mp3clips/politicalspeeches/gettysburgaddressjohnnycash.mp3';
const currentAudioFileSource = null;
const previousAudioFileSource = null;
const playbackTime = null;
const audioDuration = null;
const isPlaying = null;
const audioSourceChanged = null
const audioPlayerElement = null
// Define component's functionality
const onClickPlayButton = (): void => {
console.log('Clicked play button');
};
const setAudioSourceToUserInput = (): void => {
console.log('Setting new source');
};
const startPlaying = (): void => {
console.log('Starting to play');
};
const stopPlaying = (): void => {
console.log('Stopping to play');
};
const onChangeCurrentAudioTime = (ev: Event): void => {
console.log('Changing current audio time');
};
const registerAudioPlayer = (): void => {
console.log('Registering Audio PLayer');
};
onMounted(() => registerAudioPlayer());
</script>
<template>
<div class="audio">
<audio class="hidden" ref="audioPlayerElement" controls>
<source :src="currentAudioFileSource" type="audio/mpeg" />
</audio>
<div class="audio__input">
<label class="audio__input__label" for="audio-http-address">Enter the adress of an audio file</label>
<input
class="audio__input__field"
v-model="currentAudioFileSource"
type="text"
name="audio-http-address"
id="audio-input"
/>
</div>
<div class="audio__player">
<button @click="onClickPlayButton" v-if="!isPlaying" class="audio__player__button">
<i-play></i-play>
</button>
<button @click="onClickPlayButton" v-if="isPlaying" class="audio__player__button">
<i-pause></i-pause>
</button>
<input
class="audio__player__slider"
type="range"
step="0.01"
:value="playbackTime"
:max="audioDuration"
min="0"
@change="onChangeCurrentAudioTime"
/>
</div>
</div>
</template>
<style scoped>
.audio {
background-color: var(--accent-color-secondary);
margin: auto;
width: 100%;
max-width: 24rem;
padding: 1rem 1.5rem;
border-radius: 8px;
}
.audio__input__label {
color: #fff;
background-color: transparent;
}
.audio__input {
background-color: transparent;
}
.audio__input__field {
margin: 0.25rem auto 1rem;
width: 100%;
padding: 0.5rem;
border: 2px solid var(--accent-color-secondary);
border-radius: 50px;
}
.audio__player {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--background-color-tartiary);
padding: 0.5rem 1rem;
border-radius: 50px;
}
.audio__player__button {
border: none;
outline: none;
cursor: pointer;
background-color: transparent;
height: 1.5rem;
margin: 0 0.5rem 0 0;
padding: 0;
}
.hidden {
display: none;
}
input.audio__player__slider {
background: var(--background-color-secondary);
cursor: pointer;
-webkit-appearance: none;
width: 100%;
height: 1rem;
border-radius: 50px;
}
input.audio__player__slider:focus {
outline: none;
}
input.audio__player__slider::-webkit-slider-runnable-track {
background: var(--background-color-secondary);
cursor: pointer;
-webkit-appearance: none;
width: 100%;
height: 1rem;
border-radius: 50px;
}
input.audio__player__slider::-webkit-slider-thumb {
background: var(--accent-color-primary);
height: 1rem;
width: 1rem;
border-radius: 50px;
-webkit-appearance: none;
appearance: none;
}
input.audio__player__slider:focus::-webkit-slider-runnable-track {
background: var(--background-color-tartiary);
}
input.audio__player__slider::-moz-range-track {
background: var(--background-color-secondary);
cursor: pointer;
width: 100%;
height: 1rem;
border-radius: 50px;
}
input.audio__player__slider::-moz-range-thumb {
background: var(--accent-color-primary);
height: 1rem;
width: 1rem;
border-radius: 50px;
}
input.audio__player__slider::-ms-track {
background: var(--background-color-secondary);
cursor: pointer;
width: 100%;
height: 1rem;
}
input.audio__player__slider::-ms-fill-lower {
background: var(--background-color-secondary);
}
input.audio__player__slider::-ms-fill-upper {
background: var(--background-color-secondary);
}
input.audio__player__slider::-ms-thumb {
background: var(--accent-color-primary);
height: 1rem;
width: 1rem;
border-radius: 50px;
}
input.audio__player__slider:focus::-ms-fill-lower {
background: transparent;
}
input.audio__player__slider:focus::-ms-fill-upper {
background: transparent;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment