<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Context Example</title>
</head>
<body>
<input type="file" id="fileInput" accept=".mp3">
<audio id="audioElement" controls></audio>
<script>
const fileInput = document.getElementById('fileInput');
const audioElement = document.getElementById('audioElement');
const audioContext = new AudioContext();
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
audioElement.src = e.target.result;
const source = audioContext.createMediaElementSource(audioElement);
source.connect(audioContext.destination);
audioElement.play();
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>