Criando um metrônomo online. V1.0 (conceito) – Blog – Devdata Sistemas

É possível criar um metrônomo online usando linguagens de programação web como HTML, JavaScript e CSS. Um metrônomo é uma ferramenta útil para músicos que desejam manter um ritmo constante enquanto praticam. Vou fornecer um exemplo básico de como criar um metrônomo simples usando essas tecnologias.

Aqui está um exemplo de código HTML, JavaScript e CSS para um metrônomo online básico:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Metrônomo Online</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="metronome">
        <div class="beat"></div>
    </div>
    <button id="startStopButton">Iniciar</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}

.metronome {
    width: 100px;
    height: 100px;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
    color: white;
}

#startStopButton {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
}

JavaScript (script.js):

const metronome = document.querySelector(".metronome");
const startStopButton = document.getElementById("startStopButton");
let isPlaying = false;
let intervalId;

function playTick() {
    metronome.style.backgroundColor = "red";
    setTimeout(() => {
        metronome.style.backgroundColor = "#333";
    }, 100);
}

function toggleMetronome() {
    if (isPlaying) {
        clearInterval(intervalId);
        startStopButton.textContent = "Iniciar";
    } else {
        intervalId = setInterval(playTick, 60000 / 120); // 120 BPM
        startStopButton.textContent = "Parar";
    }
    isPlaying = !isPlaying;
}

startStopButton.addEventListener("click", toggleMetronome);

Este exemplo cria um metrônomo que toca um tick a cada batida. Você pode ajustar o tempo (BPM) ajustando o valor no setInterval(playTick, 60000 / 120), onde 120 é o BPM atual.

Lembre-se de que este é apenas um exemplo básico. Você pode melhorá-lo adicionando mais funcionalidades, como a capacidade de ajustar o tempo, diferentes sons de metrônomo, visualizações visuais mais avançadas, etc.

Beep

É possível adicionar um som de “beep” ou “click” em JavaScript para acompanhar o flash visual do metrônomo. Você pode fazer isso usando a API Web Audio do HTML5 para criar um som simples e reproduzi-lo sincronizado com o ritmo do metrônomo. Aqui está um exemplo de como você pode modificar o código JavaScript do metrônomo anterior para incluir um som:

javascriptCopy codeconst metronome = document.querySelector(".metronome");
const startStopButton = document.getElementById("startStopButton");
let isPlaying = false;
let intervalId;
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
let tickSound;

// Carregar o som do tick (bip) usando um oscilador simples
function loadTickSound() {
    tickSound = audioContext.createOscillator();
    tickSound.frequency.setValueAtTime(800, audioContext.currentTime); // Frequência do beep
    tickSound.type = 'square'; // Forma do som (neste caso, um beep "square")
    tickSound.connect(audioContext.destination);
}

function playTick() {
    loadTickSound();
    tickSound.start();
    metronome.style.backgroundColor = "red";
    setTimeout(() => {
        metronome.style.backgroundColor = "#333";
        tickSound.stop();
    }, 100);
}

function toggleMetronome() {
    if (isPlaying) {
        clearInterval(intervalId);
        startStopButton.textContent = "Iniciar";
    } else {
        intervalId = setInterval(playTick, 60000 / 120); // 120 BPM
        startStopButton.textContent = "Parar";
    }
    isPlaying = !isPlaying;
}

startStopButton.addEventListener("click", toggleMetronome);

Neste exemplo, usei um oscilador simples para criar o som do tick (beep). A função loadTickSound configura o oscilador com a frequência desejada e a forma do som (no exemplo, um beep “square”). A função playTick reproduz o som do tick sincronizado com o flash visual do metrônomo.

Certifique-se de ajustar a frequência e outros parâmetros do som para atender às suas preferências sonoras. Você também pode carregar um arquivo de áudio externo em vez de usar um oscilador, se preferir um som de clique mais realista.

Related Posts