As mentioned in the title, after using createMediaElementSource, my audio is not playing even after connecting source to the destination. I was working on a project which uses Meyda’s audio features to help represent these audio visually in an appropriate manner. I am new to Meyda and was trying to replicate their code example to test it out, but it did not work for me.
// meydaScript.js
const audioContext = new AudioContext();
const htmlAudioElement = document.getElementById("audio");
const source = audioContext.createMediaElementSource(htmlAudioElement);
source.connect(audioContext.destination);
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
<script type="text/javascript" src="https://unpkg.com/meyda/dist/web/meyda.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<main>
<audio
controls
loop
crossorigin='anonymous'
id='audio'
src="assets/Ex2_sound1.wav"
>
</audio>
<br>
<label for="level">Level</label>
<input type="range"
id="levelRange"
name="level"
min="0.0"
max="1.0"
step="0.001"
/>
</main>
</body>
<script src="meydaScript.js"></script>
</html>
There is nothing in main.js for now, it is for adding some p5.js functionality later.
I’ve been scouring some posts online and in most cases, the solutions to the questions is just to add source.connect(audioContext.destination); I already have that, so what else am I missing? I’ve tried to console.log every single line in meydaScript.js, so I know my issue lies with createMediaElementSource or whatever it’s related to.