javascript - 根据正在播放的声音显示文本

标签 javascript html google-chrome

所以,我希望能够显示文本,告诉我按下按钮时正在播放什么声音,但我什至不知道从哪里开始。

我的 HTML 是您按下的按钮

我的 JavaScript 随机化将播放的声音

如有任何帮助,我们将不胜感激

<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 将告诉您正在播放的声音。在 playSound() 函数的示例中,我只是将显示状态的某些元素的 .innerHTML 设置为 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>

关于javascript - 根据正在播放的声音显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43665651/

相关文章:

javascript - 如何修复在某些浏览器上停止工作的背景视频

javascript - 缩放视口(viewport)时如何从指针事件获得与触摸事件相同的坐标?

javascript - 使用 href onClick 选择所有 HTML 复选框

google-chrome - 为什么我在 WhatsApp 网页版中看不到网络事件?

internet-explorer - 在 google.co.uk 上,为什么我的网站在 Firefox 中的排名高于其他桌面浏览器?

css - FIORI 自定义主题被部分用户的 library.css 覆盖

javascript - 如果找到 Razor 处理程序,则调用 JS 函数

javascript - 如何修复警告 : validateDOMNesting(. ..):<div> 不能作为 <tbody> 的子项出现

javascript - IE 中的 JQuery jqGrid 垂直间距问题

html - line-height 和 border-width 之间的不良交互破坏了垂直节奏 - 它们可以调和吗?