如何让我的按钮在我再次按下时播放新的音频文件？

Question

我在 neocities 上创建了一个网站，只要你按下按钮就会播放一个音频文件 GENERATE AUDIO

有趣的是，每当我再次按下它时，它都会播放相同的音频。获取新音频的唯一方法是重新加载页面本身。有没有一种方法可以在不重新加载页面的情况下更改音频文件？

这是我的按钮：

<a href="#" onclick="test.play()"> GENERATE MUSIC </a>

下面是我如何让它播放数组中的随机音频：

const audioList = [
     "audio1.mp3", 
     "audio2.mp3", 
     "audio3.mp3", 
     "audio4.mp3"];

var test = new Audio();
var audioNum = Math.floor(Math.random() * audioList.length);
test.src = audioList[audioNum];

Answer 1

试试这个：

const audioList = [
  "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
  "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
  "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
  "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3"
];

const audio = new Audio()

function generateMusic() {
  const audioNum = Math.floor(Math.random() * audioList.length);
  audio.src = audioList[audioNum];
  audio.load()
  audio.play()
}

<a href="#" onclick="generateMusic()"> GENERATE MUSIC </a>

我对你的代码所做的更改：

创建一个函数，每次您按下按钮。

选择一首新歌曲

将这首歌设置为 .src 并 .play() 它。
load() 方法重新加载音频元素。

如何让我的按钮在我再次按下时播放新的音频文件？

How do I make my button play a new audio file when I press it again?

html

javascript

audio

button