0

У меня есть html код, где есть аудио в js, и мне бы хотелось реализовать случайный следующий трек и что бы 1 и тот же трек для раза подряд не выпадал, а как это сделать я не знаю. Если можете чем-то помочь, я буду благодарен. Вот сам код:

function timeColor() {
  var now = new Date();
  var hours = now.getHours();
  var color = "#f2d44e";
  if (hours >= 20 || hours < 7)
    color = "#00203f"
  return color;
}

// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = ['audio/Nightcore.mp3', 'audio/longlost.mp3', 'audio/Nightcore.mp3'][Math.random() * 2 | 0];
audio.controls = false;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);

function initMp3Player() {
  document.getElementById('audio_box').appendChild(audio);
  context = new AudioContext(); // AudioContext object instance
  analyser = context.createAnalyser(); // AnalyserNode method
  canvas = document.getElementById('analyser_render');
  ctx = canvas.getContext('2d');
  // Re-route audio playback into the processing graph of the AudioContext
  source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);
  frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper() {
  window.requestAnimationFrame(frameLooper);
  fbc_array = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(fbc_array);
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

  ctx.fillStyle = timeColor(); // Color of the bars

  bars = 500;

  for (var i = 0; i < bars; i++) {
    bar_x = i * 3;
    bar_width = 2;
    bar_height = -(fbc_array[i] / 3);
    //  fillRect( x, y, width, height ) // Explanation of the parameters below
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
  }
}
#analyser_render {
  height: 30px;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
}
<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_render"></canvas>
</div>

1 ответ 1

1

Вам понадобится библиотека файлов и ротатор для неё, а также прослушивание события завершения аудио-фрагмента.

Код будет примерно таким:

function timeColor() {
  var now = new Date();
  var hours = now.getHours();
  var color = "#f2d44e";
  if (hours >= 20 || hours < 7) {
    color = "#00203f";
  }
  return color;
}
//* Create library for audio rotation
var audioLibrary = [
  'audio/Nightcore.mp3',
  'audio/longlost.mp3',
  'audio/Nightcore.mp3'
];
//* Get random audio from library and remove it
function getRandomSound() {
  var audioPosition = Math.floor(Math.random() * audioLibrary.length);
  var audioFile = audioLibrary[audioPosition];
  audioLibrary.splice(audioPosition,1);
  return audioFile;
}
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = getRandomSound();
audio.controls = false;
audio.loop = true;
audio.autoplay = true;

// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;

function initMp3Player() {
  document.getElementById('audio_box').appendChild(audio);
  audio.addEventListener('ended', function() {
    //* update audio source
    audio.src = getRandomSound();
  });

  context = new AudioContext(); // AudioContext object instance
  analyser = context.createAnalyser(); // AnalyserNode method
  canvas = document.getElementById('analyser_render');
  ctx = canvas.getContext('2d');
  // Re-route audio playback into the processing graph of the AudioContext
  source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);
  frameLooper();
}
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper() {
  window.requestAnimationFrame(frameLooper);
  fbc_array = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(fbc_array);
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
  ctx.fillStyle = timeColor(); // Color of the bars
  bars = 500;

  for (var i = 0; i < bars; i++) {
    bar_x = i * 3;
    bar_width = 2;
    bar_height = -(fbc_array[i] / 3);
    //  fillRect( x, y, width, height ) // Explanation of the parameters below
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
  }
}

4
  • Я это знаю как сделать меня больше интересует как сделать что бы избежать повторов. P.S. Извиняюсь за неправильный вопрос. 11 мар 2017 в 13:58
  • При каждом выборе файла удаляйте его из библиотеки. Поправил код. Не забудьте обработать ситуацию, когда массив звуков закончится.
    – br3t
    11 мар 2017 в 21:29
  • Ещё 1 вопрос, а как это сделать, просто я в том как-то не очень, особенно с массивами. ) 12 мар 2017 в 15:41
  • Перед каждым извлечением звука проверять, если audioLibrary.length равно нулю, то останавливать проигрывание.
    – br3t
    12 мар 2017 в 20:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.