Попытка получить звук для воспроизведения через 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>