Audio only Video element


by Jeremy Caudle
code

Just a quick test of placing only audio within the video element. I'm trying to figure out how many uses there may be for this approach since you can include captions or subtitles to display alongside the audio.

Playing audio within the video element.

View the code:

HTML and JS 
<div class="codedoodle-block">
		<h3 style="text-align:center;">Playing audio within the video element.</h3>
		<video controls preload="auto">
			<source src="../ast/testaudio.mp3" type="audio/mpeg">
			Your browser does not appear to support the <code>video</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>
</video
			</div>
CSS 
.codedoodle-block {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-content: center;
		padding: 1.5rem 1rem;
		margin: 2rem auto;
		background: #00000022;
		border-radius: 1rem;
		max-width: 30em;
		font-family: Helvetica, sans-serif;
	}

Tags