Javascript код, чтобы анимация реагировала на звуковые файлы, работающие в Edge, но не в Chrome - PullRequest
Новая
       4

Javascript код, чтобы анимация реагировала на звуковые файлы, работающие в Edge, но не в Chrome

0 голосов
/ 20 февраля 2020

Я нашел этот код из учебника YouTube, созданного Адамом Хури из его Analyzer Bars Animation HTML5 Аудио API JavaScript Учебник. Где musi c analyzer graphi c реагирует на звуковой файл. Это с 2013 года. Я попытался заставить его работать, обновив код, насколько я понимаю. Я удалил webkit и изменил синтаксис, меняя некоторые буквы на строчные. Он хорошо играет в браузере Edge, но не в Chrome. Очевидно, я что-то упустил, любая помощь будет принята с благодарностью.

HTML код: 

<!doctype html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js.js"></script>
<title>Untitled Document</title>
</head>
<body>

<div id="mp3_player">

    <div id="audio_box"></div>

    <canvas id="analyser_render"></canvas>
    </div>
 </body>
</html>

CSS код: 

body{
    background-color: #494545;
}
#mp3_player{
    width: 420px;
    height: 75px;
    background-color:#FAFAFA;
    margin-left: auto;
    margin-right: auto;
    margin-top: 300px;
    text-align: center;
}
audio{
    width: 400px;
    padding-top: 10px;
    }
#analyser_render{

    width: 400px;
    height: 20px;
    background-color: aliceblue;
    }

Javascript код: 

var audio = new Audio();
audio.src = 'Piano_01.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = false;
// 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 = '#006600'; // Color of the bars
    bars = 100;
    for (var i = 0; i < bars; i++) {
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(fbc_array[i] / 2);
        //  fillRect( x, y, width, height ) // Explanation of the parameters below
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}

1 Ответ

0 голосов
/ 20 февраля 2020

В Chrome вы сталкиваетесь с двумя проблемами:

  • в обработчике обратного вызова для события onload , которое вы создаете, новое AudioContext() что недопустимо, потому что воспроизведение должно запускаться при взаимодействии с пользователем, например, щелчком мыши

  • chrome запрещает доступ к аудиофайлам из локальной файловой системы. Если вы посмотрите в консоль, вы, скорее всего, обнаружите ошибку, такую ​​как

Доступ к аудио в ... из источника 'null' был заблокирован политикой CORS

Обходной путь:

  • загрузите свои файлы на веб-сервер или запустите с локального веб-сервера.

  • вместо перегрузки загрузки событие, чтобы настроить ваш AudioContext, прослушать событие Audio воспроизведения и выполнить инициализацию в его обработчике обратного вызова. Это обеспечит создание AudioContext, как только начнется воспроизведение звука, потому что пользователь нажал на кнопку воспроизведения.

Вот пример (просто нажмите «Запустить фрагмент кода»): 

var audio = new Audio();
audio.crossOrigin = "anonymous";
audio.src = 'https://api.codetabs.com/v1/proxy?quest=http://www.hyperion-records.co.uk/audiotest/3%20Schubert%20String%20Quartet%20No%2014%20in%20D%20minor%20Death%20and%20the%20Maiden,%20D810%20-%20Movement%203%20Scherzo%20Allegro%20molto.MP3';
audio.controls = true;
audio.loop = true;
audio.autoplay = false;
audio.addEventListener("playing", start);
// 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);
}
// 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 = '#006600'; // Color of the bars
  bars = 100;
  for (var i = 0; i < bars; i++) {
    bar_x = i * 3;
    bar_width = 2;
    bar_height = -(fbc_array[i] / 2);
    //  fillRect( x, y, width, height ) // Explanation of the parameters below
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
  }
}

function start() {
  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();
  audio.removeEventListener("playing", start);
}
body {
  background-color: #494545;
}

#mp3_player {
  width: 420px;
  height: 75px;
  background-color: #FAFAFA;
  margin-left: auto;
  margin-right: auto;
  margin-top: 300px;
  text-align: center;
}

audio {
  width: 400px;
  padding-top: 10px;
}

#analyser_render {
  width: 400px;
  height: 20px;
  background-color: aliceblue;
}
<body>

  <div id="mp3_player">

    <div id="audio_box"></div>

    <canvas id="analyser_render"></canvas>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...