Copy link to clipboard
Copied
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:
<p><audio controls preload="none" style=" width:300px;">
<source src="http://www.bigmusicgeek.com/geekcasts/audio/adriangalysh.mp3" type="audio/mpeg">
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!
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>
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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