使用 Javascript 按按钮播放随机歌曲

Question

我做了一些 HTML 代码一个函数，这样当一个按钮被点击时，它会运行randomSong() ，它现在应该运行一首随机歌曲，它运行这个：

function randomSong() {
    var n = (1 + Math.random() * 2);
    if (n == 0){
        var song = document.getElementById('1')
        console.log("0")
    }else if(n == 1){
        var song = document.getElementById('2');
        console.log('1')}
    let y = song
}
var x = y

function playAudio() {
    x.play();
}

function pauseAudio() {
    x.pause();
}

但它不起作用它说 x 没有定义任何人现在为什么？ 链接到我使用它的网站

Answer 1

我试过你的演示，它说y is not defined因为当你尝试访问y的外部范围时。

你可以这样尝试：

var x;

function randomSong() {
    var n = (1 + Math.random() * 2);
    var song;
    if (n === 0){
        song = document.getElementById('1')
        console.log("0")
    }
    else if(n === 1){
        song = document.getElementById('2');
        console.log('1')
    }
    x = song;
}

function playAudio() {
    if(x){
        x.play();
    }
}

function pauseAudio() {
    if(x){
        x.pause();
    }
}

Answer 2

如果这不起作用，Yuu 需要提供更多代码。 我所做的只是修正了一些明显的错误。 具体来说， n ==enter code here 0改为n==0 and var x = y; 其中y不是全局变量y现在是全局变量。 如果这没有帮助添加更多代码，我会看看我是否可以解决它。

 var y; function randomSong() { var n = (1 + Math.random() * 2); if (n == 0) { var song = document.getElementById('1') console.log("0") } else if (n == 1) { var song = document.getElementById('2'); console.log('1') } y = song; } var x = y; function playAudio() { x.play(); } function pauseAudio() { x.pause(); }

Answer 3

let x;

function randomSong() {
  const n = (1 + Math.random() * 2);
  let song;
  if (n === 0) {
    song = '0'
    console.log("0");
  }else if (n === 1) {
    song = '1';
    console.log('1');
  } else {
    song = '999';
    console.log('999');
  }
  x = song;
}

function playAudio() {
  console.log(`${x} play`);
}

function pauseAudio() {
  console.log(`${x} pause`);
}

randomSong();
playAudio();
pauseAudio();

不推荐使用var如果使用var是不必要的

Answer 4

let 、 const和class引入的标识符是块范围的。 因此在

    else if(n == 1){
         var song = document.getElementById('2');
         console.log('1')}
         let y = song
    }
    var x = y

由let y = song创建的y变量在分配给x时不在范围内

   var x = y

如果分配到x进行不产生错误则可能表示的先前定义y ，可能具有undefined值是在范围内。 这是一个自动输入可以产生的陷阱：

不要自动使用let或const在外部作用域变量的赋值之前进行赋值，否则赋值不会发生。

Answer 5

我查看了您的网站，我注意到当您单击“单击此处获取推荐歌曲”时，它会调用函数 num()，因此这会显示一个带有建议曲目的警报。 所以把它变成你想要的。 当我们点击按钮时，我们必须调用函数 randomSong 和带有注释解释的代码：

var song = null;
function randomSong() {
    //to get audio's number dynamically.
    let n = document.querySelectorAll('p audio').length;
    //grab all audios from HTML Node List to an array.
    let audios = [...document.querySelectorAll('p audio')];
    //if there is another song singing ! we should stop it
    if(song!==null)    song.pause();
    //we pick randomly a song inside the array of audios.
    song = audios[ Math.floor ( Math.random() * n) ];
    //and then we play the song, Enjoy listening!
    song.play();
}

Answer 6

谢谢大家的回答，但我找到了一个更好/更简单的方法来做到这一点 javascript 是

 var songList = [
'mp3_url',
'mp3_url',
'mp3_url',
'mp3_url',
'mp3_url',
    ];
//this gets a random url from the list
function randomChoice(choices) {
  var index = Math.floor(Math.random() * choices.length);
  return choices[index];
}
//this is just a place holder you can change this function to anything
function age(){
  let current = new Date().getTime();
  var myAge = current - 1151560800000;
  var myAge = myAge/1000
  return myAge;
}
/*this trys to pause x and then play a new song but if x is not defined then you 
get an error so you have to do try catch finally*/
  function playAudio() {
  try{x.pause();}catch(err){
    var old = age();
    var years = old / 31536000;
    console.log('Hello I was ' + old + ' seconds (' + years + ' years) old when you clicked that button!');}finally{
    x = randomChoice(songList);
  x = new Audio(x);
  x.play();
  }};
function pauseAudio() {
    x.pause();
  }

而 HTML 是这样的

<button onclick="playAudio()">play a song</button>
<button onclick="pauseAudio()">pause the current song</button>