Audio Element Practice


by Jeremy Caudle
code

I was messing around with my microphones and Sony ICD-PX333 today, and wanted to see if I could dip my toes in some audio stuff for my website. So I'm playing with the audio element today.

Standard player with transcription.

This is a test of the HTML audio element.

Download the audio

Custom controls

View the code:

HTML and JS 
<div class="codedoodle-block">
		<h2>Standard player with transcription.</h2>
		<audio controls preload="auto">
			<source src="../ast/testaudio.mp3" type="audio/mpeg">
			Your browser does not appear to support the <code>audio</code> element. Please use the link below to listen to the audio.
		</audio>
		<p class="audio-transcript">This is a test of the HTML audio element.</p>
		<a href="testaudio.mp3">Download the audio</a>
		<h2>Custom controls</h2>
		<audio id="player" preload autobuffer>
			<source src="../ast/testaudio.mp3" type="audio/mpeg">
		</audio>
		<div class="player-controls">
			<button onclick="document.getElementById('player').play()" >Play</button>
			<button onclick="document.getElementById('player').pause()">Pause</button>
			<button onclick="document.getElementById('player').volume += 0.1">Volume Up</button>
			<button onclick="document.getElementById('player').volume -= 0.1">Volume Down</button>
		</div>
	</div>
CSS 
.codedoodle-block {
		display: block;
		padding: 1.5rem 1rem;
		margin: 2rem auto;
		background: #00000022;
		border-radius: 1rem;
		max-width: 30em;
		font-family: Helvetica, sans-serif;
	}

Tags