Показать сообщение отдельно
  #16 (permalink)  
Старый 12.03.2017, 11:48
Интересующийся
Отправить личное сообщение для MininDM Посмотреть профиль Найти все сообщения от MininDM
 
Регистрация: 09.03.2017
Сообщений: 15

рони, Опан,
Вот так должен выглядеть код? Но по-моему здесь лишняя переменная audio
<script>
function timeColor() {
  var now = new Date();
  var hours = now.getHours();
  var color = "#f2d44e";
  if(hours >= 20 || hours < 7)
    color = "#FFFF00"

  return color;
}

// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
var myfiles=["longlost.mp3","Nightcore.mp3"];
audio.controls = false;
audio.autoplay = true ;
 audio.onended=  function (){
  var len = myfiles.length;
  if(len){
     len *= Math.random();
     len |= 0;
     len = "audio/"+myfiles.splice(len,1)[0]
     this.src=len;
     this.play();
  }
};

// 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);
  }
}
</script>
Ответить с цитированием