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

Last Updated : 08 Feb, 2024

Adjusting the size of the audio player allows you to customize its appearance. It is often necessary to specify the size of an HTML5 audio player when building websites that contain multimedia content. To customize the HTML5 audio player’s size according to your style preferences, this article will cover two ways including Inline CSS and CSS Styling with JavaScript.

Table of Content

Using CSS Styling
Using CSS Styling with JavaScript

Using CSS Styling

To change the size of the audio player Inline styles are directly applied to the <audio> element using the style attribute. Width and height attributes are set to specific pixel values to define the size. The default style of the audio player is also shown in the example.

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:

Output

Using CSS Styling with JavaScript

To change the size of audio player , getElementById is used to select the audio elements by their IDs (audio-width-sm and audio-width-lg). The style.width and style.height properties are set to change the dimensions of the audio elements. Dynamic resizing using JavaScript allows you to respond to user interactions or specific events by adjusting the size of audio player (<audio> tag).

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

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";

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>