nextcloud-app-radio/src/components/Player.vue

<template>
	<div id="app-settings">
		<button id="playbutton" class="play" :style="playerIcon" />
		<div id="volumeicon" class="full" />
		<div id="volumeslider" />
		<span id="stationMetadata" />
	</div>
</template>

<script>
export default {
	data() {
		return {
			playerIcon: {
				backgroundImage: `url( ${require('../../img/play.png')} )`,
			},
		}
	},
}
</script>

<style>

#playbutton{
	height:50px;
	width: 50px;
	margin: 10px;
	border: none;
	background-size: 100%;
	background-position: center;
	float: left;
	transition: background-image 0.4s ease-in-out;
}

.buffering {
	animation:spin 4s linear infinite;
	/* background: url('../img/wheel.png') no-repeat; */
	transition: background-image 0.4s ease-in-out;
}

@keyframes spin { 100% { transform:rotate(360deg); } }

#station_metadata{
	margin: 2px 20px 5px 20px;
	padding-left: 5px;
	white-space:nowrap;
	overflow:hidden;
}

.play{
	/* background: url('../img/play.png') no-repeat; */
}

.pause{
	/* background: url('../img/pause.png') no-repeat; */
}

#volumeicon {
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	left: 75px;
	top: 14px;
}

#volumeicon.full {
	/* background-image: url('../img/sound_full.png'); */
}

#volumeicon.mid {
	/* background-image: url('../img/sound_mid.png'); */
}

#volumeicon.silent {
	/* background-image: url('../img/sound_silent.png'); */
}

#volumeslider{
	width: 170px;
	display: inline-block;
	position: relative;
	left: 40px;
	top: -7px;
}

</style>