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

<template>
	<div id="app-settings">
		<button id="playbutton" class="play" :style="playerIcon" />
		<div id="volumeicon" class="full" />
		<input
			class="volume"
			type="range"
			name="volume"
			min="0"
			max="50">
		<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'); */
	}

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

</style>