Positioning Text In An HTM5 Audio Player

Forum|Forum|6 years ago
March 16, 2019
1 reply
1576 views

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!

This topic has been closed for replies.

Correct answer Nancy OShea

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 OShea

Correct answer

Community Expert

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

B

BigMusicGeekAuthor

Participant

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!

Nancy OShea

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded