<audio src="podcast-episodio-01.mp3" controls preload="metadata">
    <!-- Mensagem de contingência para navegadores obsoletos -->
    Seu navegador não possui suporte para reprodução de áudio nativo em HTML5.
</audio>

<audio controls preload="none">
    <!-- Formato Ogg/Opus: Excelente compressão e qualidade aberta -->
    <source src="musica.ogg" type="audio/ogg; codecs=vorbis">
    
    <!-- Formato MP3 universal: Compatibilidade garantida em todos os dispositivos -->
    <source src="musica.mp3" type="audio/mpeg">
 
    <!-- Link de fallback caso a mídia falhe -->
    <p>Seu navegador não suporta áudio. <a href="musica.mp3" download>Baixar arquivo MP3</a>.</p>
</audio>

// Cria o objeto de áudio dinamicamente em memória
const somClique = new Audio('https://webzoneware.com/sons/sucesso.mp3');
 
// Ajusta o volume (escala de 0.0 a 1.0)
somClique.volume = 0.6;
 
// Função disparada no clique de um botão
function dispararEfeito() {
    somClique.currentTime = 0; // Reinicia o áudio caso o usuário clique várias vezes
    somClique.play();          // Dispara a reprodução instantânea
}

<div class="wzw-podcast-card">
    <!-- Capa e Informações do Episódio -->
    <div class="podcast-info">
        <div class="podcast-cover">🎙️</div>
        <div>
            <h4 class="podcast-title">Web Academy Podcast #43</h4>
            <p class="podcast-author">Dominando Áudio e Multimídia no HTML5</p>
        </div>
    </div>
 
    <!-- Elemento de Áudio Oculto (Controlado por Script) -->
    <audio id="podcastAudio" preload="metadata">
        <source src="https://actions.google.com/sounds/v1/ambiences/rain_heavy.ogg" type="audio/ogg">
        <source src="https://actions.google.com/sounds/v1/ambiences/rain_heavy.mp3" type="audio/mpeg">
    </audio>
 
    <!-- Barra de Progresso Clicável -->
    <div class="audio-progress-bar" id="barraContainer">
        <div class="audio-progress-fill" id="barraFill"></div>
    </div>
 
    <!-- Controles e Mostrador de Tempo -->
    <div class="audio-controls">
        <button id="btnPlayPause" class="btn-audio-action">▶ Play</button>
        <span id="tempoLabel" class="time-counter">00:00 / 00:00</span>
        <button id="btnSpeed" class="btn-speed">1.0x</button>
    </div>
</div>

.wzw-podcast-card {
    max-width: 480px;
    padding: 20px;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #f8fafc;
}
 
.podcast-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
 
.podcast-cover {
    width: 54px;
    height: 54px;
    background-color: #1e293b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
 
.podcast-title {
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
}
 
.podcast-author {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #94a3b8;
}
 
.audio-progress-bar {
    height: 8px;
    background-color: #334155;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 14px;
}
 
.audio-progress-fill {
    width: 0%;
    height: 100%;
    background-color: #38bdf8;
    transition: width 0.1s linear;
}
 
.audio-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
.btn-audio-action {
    padding: 8px 18px;
    background-color: #38bdf8;
    color: #0f172a;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}
 
.time-counter {
    font-family: monospace;
    font-size: 0.85rem;
    color: #94a3b8;
}
 
.btn-speed {
    padding: 6px 10px;
    background-color: #1e293b;
    color: #cbd5e1;
    border: 1px solid #334155;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

const audio = document.getElementById('podcastAudio');
const btnPlay = document.getElementById('btnPlayPause');
const barraFill = document.getElementById('barraFill');
const barraContainer = document.getElementById('barraContainer');
const tempoLabel = document.getElementById('tempoLabel');
const btnSpeed = document.getElementById('btnSpeed');
 
// Formata segundos para MM:SS
function formatarTempo(segs) {
    if (isNaN(segs)) return '00:00';
    const m = Math.floor(segs / 60);
    const s = Math.floor(segs % 60);
    return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
}
 
// 1. Play / Pause
btnPlay.addEventListener('click', () => {
    if (audio.paused) {
        audio.play();
        btnPlay.textContent = '⏸ Pausar';
    } else {
        audio.pause();
        btnPlay.textContent = '▶ Play';
    }
});
 
// 2. Atualização de Tempo e Barra
audio.addEventListener('timeupdate', () => {
    const progresso = (audio.currentTime / audio.duration) * 100;
    barraFill.style.width = `${progresso}%`;
    tempoLabel.textContent = `${formatarTempo(audio.currentTime)} / ${formatarTempo(audio.duration)}`;
});
 
// 3. Salto no Áudio ao Clicar na Barra
barraContainer.addEventListener('click', (e) => {
    const larguraTotal = barraContainer.clientWidth;
    const cliqueX = e.offsetX;
    audio.currentTime = (cliqueX / larguraTotal) * audio.duration;
});
 
// 4. Seletor de Velocidade (1.0x -> 1.5x -> 2.0x -> 1.0x)
const velocidades = [1.0, 1.5, 2.0];
let idxVel = 0;
btnSpeed.addEventListener('click', () => {
    idxVel = (idxVel + 1) % velocidades.length;
    audio.playbackRate = velocidades[idxVel];
    btnSpeed.textContent = `${velocidades[idxVel].toFixed(1)}x`;
});