Empty boilerplate for an audio player Vue component

AppAudioPlayer.vue

<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>