Highlighted

Positioning Text In An HTM5 Audio Player

Explorer ,
Mar 16, 2019

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

173

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Positioning Text In An HTM5 Audio Player

Explorer ,
Mar 16, 2019

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

174

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 16, 2019 0
Adobe Community Professional ,
Mar 16, 2019

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2019 0
Explorer ,
Mar 16, 2019

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2019 0
Adobe Community Professional ,
Mar 16, 2019

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2019 1
Adobe Community Professional ,
Mar 18, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 2