JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<div class="audio-wrapper">
    <audio src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4" controls autoplay>
        <p>If you are reading this, it is because your browser does not support the audio element.</p>
        <embed src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4" width="180" height="90" hidden="true" />
    </audio>
</div>

CSS

.audio-wrapper {
            width: 100%; /* 컨트롤러의 너비 조정 */
            max-width: 300px;
            margin: 0 auto;
            padding: 10px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        audio {
            width: 100%;
            max-width: 150px;
            height: 40px; /* 높이 조정 */
        }