Click here for free DL of the app version that can save data.

No:27192

←

Prev Next

→

Sound Meter
Developer User7816｜Date and time 23/12/5 1:42:32
Build time 64.732 sec｜Game capacity 4.979KB｜

Script

Sound Meter Game

Score: 0

Level: 1

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Sound Meter Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 0;
      padding: 20px;
    }
    h1 {
      color: #333;
    }
    #score {
      color: #666;
      font-size: 18px;
    }
    #level {
      color: #666;
      font-size: 16px;
      margin-top: 20px;
    }
    #status {
      color: green;
      font-size: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Sound Meter Game</h1>
  <p id="score">Score: 0</p>
  <p id="level">Level: 1</p>
  <p id="status"></p>
  <canvas id="gameCanvas" width="300" height="300"></canvas>

var score = 0;
    var level = 1;
    var status = "";
    var isPlaying = false;
    var levelInterval = null;

var soundMeter = new SoundMeter();

document.addEventListener("keydown", function(event) {
      if (event.key === "Enter" && !isPlaying) {
        isPlaying = true;
        status = "Game started!";
        startGame();
      }
    });

function startGame() {
      score = 0;
      level = 1;
      levelInterval = setInterval(increaseLevel, 5000);

soundMeter.start();

gameLoop();
    }

function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

const volume = soundMeter.instant.toFixed(2);

// Show volume level
      ctx.font = "18px Arial";
      ctx.fillStyle = "#333";
      ctx.fillText("Volume: " + volume, 10, 30);

if (volume > level * 10) {
        score += 10;
        status = "Great! Keep it up!";
      } else {
        status = "Make some noise!";
      }

ctx.font = "24px Arial";
      ctx.fillStyle = "green";
      ctx.fillText(status, canvas.width/2, canvas.height/2);

ctx.font = "18px Arial";
      ctx.fillStyle = "#666";
      ctx.fillText("Score: " + score, canvas.width/2, canvas.height - 30);
      ctx.fillText("Level: " + level, canvas.width/2, canvas.height - 10);

if (isPlaying) {
        requestAnimationFrame(gameLoop);
      }
    }

function increaseLevel() {
      level++;
      clearInterval(levelInterval);
      levelInterval = setInterval(increaseLevel, 5000);
    }

function SoundMeter() {
      var inst = this;
      var audioContext = null;
      var meter = null;
      var rafID = null;

window.AudioContext = window.AudioContext || window.webkitAudioContext;
      audioContext = new AudioContext();

var constraints = { audio: true, video: false };

function onMicSuccess(stream) {
        meter = createAudioMeter(audioContext);
        var source = audioContext.createMediaStreamSource(stream);
        source.connect(meter);
        inst.start();
      }

function onMicError(error) {
        console.log('Error accessing microphone:', error);
      }

navigator.mediaDevices.getUserMedia(constraints).then(onMicSuccess).catch(onMicError);

function createAudioMeter(audioContext, clipLevel, averaging, clipLag) {
        var processor = audioContext.createScriptProcessor(512);
        processor.onaudioprocess = volumeAudioProcess;
        processor.clipping = false;
        processor.lastClip = 0;
        processor.volume = 0;
        processor.clipLevel = clipLevel || 0.98;
        processor.averaging = averaging || 0.95;
        processor.clipLag = clipLag || 750;

processor.connect(audioContext.destination);

processor.checkClipping = function() {
          if (!this.clipping) {
            return false;
          }
          if ((this.lastClip + this.clipLag) < window.performance.now()) {
            this.clipping = false;
          }
          return this.clipping;
        };

processor.shutdown = function() {
          this.disconnect();
          this.onaudioprocess = null;
        };

return processor;
      }

function volumeAudioProcess(event) {
        var buf = event.inputBuffer.getChannelData(0);
        var sum = 0;
        var x;

for (var i = 0; i < buf.length; i++) {
          x = buf[i];
          if (Math.abs(x) >= this.clipLevel) {
            this.clipping = true;
            this.lastClip = window.performance.now();
          }
          sum += x * x;
        }

var rms = Math.sqrt(sum / buf.length);

this.volume = Math.max(rms, this.volume * this.averaging);
      }

this.start = function() {
        audioContext.resume();
        rafID = window.requestAnimationFrame(handleMeter);
      };

this.stop = function() {
        audioContext.suspend();
        window.cancelAnimationFrame(rafID);
      };

this.instant = function() {
        return meter.volume;
      };

function handleMeter() {
        if (inst.instant() !== -Infinity) {
          inst.instant();
        }
        rafID = window.requestAnimationFrame(handleMeter);
      }
    }
  </script>
</body>
</html>