How to Change the Size of Audio Player in HTML 5 ?

Last Updated : 22 Jul, 2024

Customizing the size of an HTML5 audio player allows you to tailor its appearance to fit the style of your website. This is particularly important for websites featuring multimedia content. In this article, we will cover two methods to adjust the size of the HTML5 audio player.

Table of Content

1. Using Inline CSS
2. Using CSS Styling with JavaScript

1. Using Inline CSS

Inline styles are directly applied to the <audio> element using the style attribute. By setting the width and height attributes to specific pixel values, you can define the size of the audio player.

Example 1: Illustration of changing the size of the audio player using Inline CSS styling.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>How to change the size
        of audio player in HTML 5
    </title>
</head>

<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Change the size of audio player</h3>
    <audio controls style="width: 500px; height: 50px">
        <source src="sample.mp3" type="audio/mp3" />
    </audio>
    <p>Below is the Default size </p>
    <audio controls>
        <source src="sample.mp3" type="audio/mp3" />
    </audio>
</body>

</html>

Output:

2. Using CSS Styling with JavaScript

Using JavaScript to change the size of the audio player allows for dynamic resizing based on user interactions or specific events. The getElementById method selects the audio elements by their IDs, and the style.width and style.height properties are used to change the dimensions.

Example 2: Illustration of changing the size of audio player using document object model.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                                initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"
        content="ie=edge" />
    <title>Change size</title>
    <style>
        h1,
        h3 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>change the size of audio player 
        using document object model
    </h3>
    <audio controls id="audio-width-sm">
        <source src="sample.mp3" type="audio/mp3" />
        Audio element
    </audio> <br>
    <audio controls id="audio-width-lg">
        <source src="sample.mp3" type="audio/mp3" />
        Audio element
    </audio>
</body>

</html>
<script src="script.js"></script>

JavaScript

document.getElementById("audio-width-sm")
        .style.width = "300px";
document.getElementById("audio-width-sm")
        .style.height = "80px";

document.getElementById("audio-width-lg")
        .style.width = "500px";
document.getElementById("audio-width-lg")
        .style.height = "50px";

Output:

Adjusting the size of the HTML5 audio player enhances the visual integration of multimedia elements within your website. By using Inline CSS, you can quickly set fixed dimensions, while JavaScript offers the flexibility to dynamically resize the audio player based on user interactions. These methods ensure your audio player fits seamlessly into your web design.

How to define the type of media resource in HTML5 ?

dikshashu9v51

Improve

Article Tags :

How to Change the Size of Audio Player in HTML 5 ?

1. Using Inline CSS

2. Using CSS Styling with JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?