Question

问题由我自己解决。感谢所有帮助我的尝试

Answer 1

你必须在播放功能中生成随机数：

var tracks = [ "audiotag1","audiotag2","audiotag3"],
    randomTrack = 0;

function playTrackR()
{
  randomTrack = tracks[Math.floor(Math.random()*tracks.length)];

  document.getElementById(randomTrack).play();
  document.getElementById('playR').style.display = "none";
  document.getElementById('pauseR').style.display = "block";
  }

function pauseTrackR()
{
  document.getElementById(randomTrack).pause();
  document.getElementById('pauseR').style.display = "none";
  document.getElementById('playR').style.display = "block";
}

Answer 2

将playTrackR()方法更改为包含var randomTrack = tracks[Math.floor(Math.random()*tracks.length)];

像这样：

function playTrackR(){
  var randomTrack = tracks[Math.floor(Math.random()*tracks.length)];
  document.getElementById(randomTrack).play();
  document.getElementById('playR').style.display = "none";
  document.getElementById('pauseR').style.display = "block";
}

这样，randomTrack每次调用playTrackR()时都会设置为新的随机生成的数字。

Answer 3

我认为你必须使用ended事件。就像在this link中一样：

HTML

<audio src=""></audio>
<img src="" style="width: 30px; cursor: pointer;" onclick="playPause( this );" />

JS

// src for play button
var playSrc = "http://upload.wikimedia.org/wikipedia/commons/9/96/Crystal_Project_Player_play.png";
// src for pause button
var pauseSrc = "http://upload.wikimedia.org/wikipedia/commons/d/dd/Crystal_Project_Player_pause.png";
// array with sound's srcs
var audios = [ "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Shot.ogg", "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Death.ogg", "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Spawn.ogg", "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Break.ogg" ];
// when window full loads
window.addEventListener( "load", function( windowLoadE ) {
    // first 'img' element on the page
    var img = document.getElementsByTagName( "img" )[ 0 ];
    // set 'src' of 'img' to play
    img.src = playSrc;
    // first 'audio' element on the page
    var audio = document.getElementsByTagName( "audio" )[ 0 ];
    // set src attribute of first audio element to random src from audios array
    audio.src = audios[ Math.round( Math.random() * ( audios.length - 1 ) ) ];
    // when current audio ends
    audio.addEventListener( "ended", function( event ) {
        // first 'img' element on the page
        var img = document.getElementsByTagName( "img" )[ 0 ];
        // set 'src' of 'img' to play
        img.src = playSrc;
        // event.taget = our 'audio' tag
        // set 'src' attribute of 'audio' tag to random src from 'audios' array
        event.target.src = audios[ Math.round( Math.random() * ( audios.length - 1 ) ) ];
    } );
} );
function playPause( img ) {
    // first 'audio' element on the page
    var audio = document.getElementsByTagName( "audio" )[ 0 ];
    // if audio on pause
    if ( audio.paused ) {
        // start play
        audio.play();
        // set 'src' of 'img' to pause
        img.src = pauseSrc;
    // if audio playing
    } else {
        // set audio on pause
        audio.pause();
        // set 'src' of 'img' to play
        img.src = playSrc;
    }
}

Javascript：数字仅在刷新页面时随机化。点击按钮需要刷新

3 个答案: