Positioning Text In An HTM5 Audio Player

Report · Mar 16, 2019

Hello!

I have an HTML5 Audio Player and I would like to have the text appear on the upper left corner rather than the lower left. Here is an example of the code:

Your browser does not support the audio element.

</audio><br />

<a href="http://www.bigmusicgeek.com/geekcasts/audio/adriangalysh.mp3" title="Adrian Galysh" target="_blank" style="text-align: left;display: block">Adrian Galysh</a></p>

How can I make the text appear on the upper left corner?

Thanks!

Report · Mar 16, 2019

Try putting the text above your player.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Audio Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio {max-width:100%}
</style>
</head>
<body>
<p><a href="https://example.com/" target="_blank">Adrian Galysh</a></p>
<audio controls>
<source src="http://www.bigmusicgeek.com/geekcasts/audio/adriangalysh.mp3" type="audio/mpeg">
</audio>
<hr>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 16, 2019

Nancy

Much appreciated. As an aide, is there a way to prevent the 'total time' counter on the left from appearing when the page loads?

Thanks!

Report · Mar 16, 2019

I'm afraid not. Player controls are an all or nothing proposition. The player contains everything the browser makers decide should be there. What you see will vary depending on which browser you use.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 18, 2019

While the default controls are all or nothing, you could create your own controls with a little extra html and javascript. Here's a decent page to explain the process if you're interested: HTML5 Custom Video Controls

Adobe Community

Positioning Text In An HTM5 Audio Player

1 Correct answer