Атрибут controls тега <audio> — панель керування звуком

<p>З використанням <code>controls</code> — панель програвача видно:</p>
<p><audio controls preload="metadata">
    Ваш браузер не підтримує тег audio.
</audio></p>

<p>Без <code>controls</code> — елемент на сторінці є, але на екрані його не видно:</p>
<p><audio autoplay preload="metadata">
    Ваш браузер не підтримує тег audio.
</audio></p>

HTML

<div class="box">
    <p>1. <b>audio controls</b> — панель видно, типові 300×40:</p>
    <audio controls></audio>
</div>

<div class="box">
    <p>2. <b>audio без controls</b> — усередині рамки справді нічого немає:</p>
    <audio></audio>
</div>

<div class="box">
    <p>3. <b>controls="false"</b> — логічний атрибут, панель однаково видно:</p>
    <audio controls="false"></audio>
</div>

<div class="box">
    <p>4. Ширину задано стилями — width: 100%:</p>
    <audio controls class="wide"></audio>
</div>

<div class="box">
    <p>5. Ширину звужено до 160px — панель ховає зайве сама:</p>
    <audio controls class="narrow"></audio>
</div>

CSS

.box {
    max-width: 560px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 2px dashed #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.box p {
    margin: 0 0 8px;
}

audio {
    outline: 2px dashed #d64545;
    outline-offset: 3px;
}

.wide {
    width: 100%;
}

.narrow {
    width: 160px;
}