Trying to get audio to play through Chrome. I have a functioning piece of code that works on Internet Explorer but not Chrome... I am able to get sound to play as long on Chrome as I comment out the line that says
var audioSrc = audioCtx.createMediaElementSource(audio);
-I've tried passing in Audio as two different forms (both through an HTML audio tag as well as a HTMLMediaElement through Javascript (as detailed here Chrome - createMediaElementSource not working). Both work fine as long as, again, the createMediaElementSource() is commented out.
-If I remove the lines
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);
sound DOES play in chrome.
Here's my code below (change the mp3 file to any mp3 file you have handy). Any help would be appreciated...
<!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>