AudioContext: Звук не воспроизводится в Chrome, но работает в Internet Explorer, но работает, когда я закомментирую createMediaElement? T - PullRequest
0 голосов
/ 20 мая 2019

Попытка получить звук для воспроизведения через Chrome. У меня есть работающий фрагмент кода, который работает в Internet Explorer, но не в Chrome ... Я могу воспроизводить звук так же долго, как и в Chrome, закомментировав строку с надписью

var audioSrc = audioCtx.createMediaElementSource(audio);

-Я пытался передать Audio как две разные формы (обе через аудио-тег HTML, а также через HTMLMediaElement через Javascript (подробности здесь Chrome - createMediaElementSource не работает ). Оба работают нормально, так как До тех пор, пока снова, createMediaElementSource () закомментирован.
-Если я уберу строки

  var audioSrc = audioCtx.createMediaElementSource(audio);
  var analyser = audioCtx.createAnalyser();
  audioSrc.connect(analyser);
  audioSrc.connect(audioCtx.destination);
  analyser.connect(audioCtx.destination);


  var bufferSize = analyser.frequencyBinCount;
  var frequencyData = new Uint8Array(bufferSize);
  analyser.getByteFrequencyData(frequencyData);

звук воспроизводится в Chrome.

Вот мой код ниже (измените mp3-файл на любой mp3-файл, который у вас есть). Любая помощь будет оценена ...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
html, body, #svg {
  background-color: #FFFFFF;
}

</style>
</head>

<body>


<script src="https://d3js.org/d3.v5.min.js"></script>

<script>
  var audio = new Audio();
  audio.src = 'laugh_8.mp3';
  audio.controls = true;
  document.body.appendChild(audio);

  var audioCtx = new (window.AudioContext || window.webkitAudioContext ||  window.webAudioContext)();


  var audioSrc = audioCtx.createMediaElementSource(audio);
  var analyser = audioCtx.createAnalyser();
  audioSrc.connect(analyser);
  audioSrc.connect(audioCtx.destination);
  analyser.connect(audioCtx.destination);


  var bufferSize = analyser.frequencyBinCount;
  var frequencyData = new Uint8Array(bufferSize);
  analyser.getByteFrequencyData(frequencyData);


  var svgHeight = window.innerHeight - 100;
  var svgWidth = window.innerWidth - 10;


  var svg = d3.select('body').append('svg')
    .attr('width', svgWidth)
    .attr('height', svgHeight);

  document.write("Code is working.");

  var circle = svg.append('circle')
        .attr('r', 20)
        .attr('cx', 50)
        .attr('cy', svgHeight-100)
        .attr('fill', 'black');


</script>
</body>
</html>
...