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

Question

I made some HTML code a function so that when a button is clicked it runs randomSong() which is supposed to run a random song right now it runs this:

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();
}

but it doesn't work it says x is not defined anyone now why? Link to the website I am using this for

Answer 1

I tried your demo it says y is not defined because when you try to access to the outer scope of y .

you can try like so:

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 need to provide more code if this didn't work. All I did was fix some obviose mistakes. Specifically, n ==enter code here 0 changed to n==0 and var x = y; where y was not a global variable y is now global. If this didn't help add more code and I will see if I can solve it.

 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();

Don't recommend to use var if using of var is unnecessary

Answer 4

let , const and class introduced identifiers are block scoped. Hence in

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

the y variable created by let y = song is not in scope when assigned to x by

   var x = y

If the assignment to x proceeds without generating an error it probably means a previous definition of y , possibly with undefined value is in scope. This is a trap that automatically typing can produce:

Don't automatically precede assignments to outer scoped variables with let or const or the assignment won't take place.

Answer 5

i take a look at your site and i noticed when you click on Click Here For Suggesed Song it call function num(), so this show an alert with track suggested. So to turn this to what you want. when we click on button we have to call function randomSong and code with commented explain:

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

Thank you all for you answers but I found a better/eaiser way to do it the javascript is

 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();
  }

and the HTML is some thing like this

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