Show text by sound

advertisements

So, I'd like to be able to have text appear that would tell me what sound is playing when I press the button, but I don't really even know where to start with that.

My HTML is the button you press

My JavaScript randomizes the sound that will be played

Any help would be appreciated

<a href="#" id="soundbutton" class="button button1"></a>
  <script type="text/javascript" src="meme.js"></script>


var sounds = ["Titanic.mp3",
"Legitness.mp3",
"Lying.mp3",
"Lebron.mp3",
"Yeahboy.mp3",
"Rocketlauncher.mp3",
"Billnye.mp3",
"Running.mp3",
"Donethis.mp3"
];
var sound;
function generateRandomNumber(max) {
  return Math.floor(Math.random() * max);
}
function playSound() {
  var x = generateRandomNumber(sounds.length - 1);
  var soundSrc = sounds[x];
  if (sound) {
      sound.pause();
  } else {
      sound = new Audio();
  }
  sound.src = soundSrc;
  sound.play();
}
document.getElementById('soundbutton').addEventListener('click', playSound);


soundSrc will tell you what sound you're playing. In my example in the playSound() function, I'm just setting the .innerHTML of some element that shows the status to soundSrc.

var sounds = [
    "Titanic.mp3",
    "Legitness.mp3",
    "Lying.mp3",
    "Lebron.mp3",
    "Yeahboy.mp3",
    "Rocketlauncher.mp3",
    "Billnye.mp3",
    "Running.mp3",
    "Donethis.mp3"
];

var sound;

function generateRandomNumber(max) {
    return Math.floor(Math.random() * max);
}

function playSound() {
    var x = generateRandomNumber(sounds.length - 1);

    var soundSrc = sounds[x];

    if (sound) {
        sound.pause();
    } else {
        sound = new Audio();
    }

    sound.src = soundSrc;
    sound.play();

    document.getElementById("song").innerHTML = "Now playing: " + soundSrc;
}

document.getElementById('soundbutton').addEventListener('click', playSound);
<a href="#" id="soundbutton" class="button button1">Play new song!</a>
<h1 id="song">Not playing anything yet!</h1>