Playing Audio After The Page Loads in HTML

Playing audio after the page loads in html

You're going to need JavaScript for that. Remove the autoplay attribute:

<audio id="my_audio" src="bg.mp3" loop="loop"></audio>

and add a script like this:

window.onload = function() {
document.getElementById("my_audio").play();
}

Or if you use jQuery:

$(document).ready(function() {
$("#my_audio").get(0).play();
});

Load file and play audio on page load

You just need to load and play audio file after you got audio tag from document.

var audio = document.getElementById("audio");
audio.src = URL.createObjectURL("song.mp3");
audio.load();
audio.play();

Because Chrome don't allow autoplay audio onload until user has an interactive with the webpage. So you need to add an hidden autoplay iframe with silence sound.

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>

You can get silence sound file from here https://github.com/anars/blank-audio/blob/master/250-milliseconds-of-silence.mp3

Your js

window.onload = function() {
function renderVisual() {
var analyser = context.createAnalyser();

var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");

src.connect(analyser);
analyser.connect(context.destination);

analyser.fftSize = 256;

var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);

var dataArray = new Uint8Array(bufferLength);

var WIDTH = canvas.width;
var HEIGHT = canvas.height;

var barWidth = (WIDTH / bufferLength) * 2.5;
var barHeight;
var x = 0;

function renderFrame() {
requestAnimationFrame(renderFrame);

x = 0;

analyser.getByteFrequencyData(dataArray);

ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, WIDTH, HEIGHT);

for (var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];

var r = barHeight + (25 * (i/bufferLength));
var g = 250 * (i/bufferLength);
var b = 50;

ctx.fillStyle = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

x += barWidth + 1;
}
}

renderFrame();
}

var context = new AudioContext();
var file = document.getElementById("thefile");
var audio = document.getElementById("audio");
audio.src = "song.mp3";
audio.load();
var src = context.createMediaElementSource(audio);
audio.play();
renderVisual();

file.onchange = function() {
var files = this.files;
audio.src = URL.createObjectURL(files[0]);
audio.load();
audio.play();
renderVisual();
};
};

Your html

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>JS Audio Visualizer</title>

<link rel="stylesheet" href="./style.css">

</head>

<body>

<div id="content">
<input type="file" id="thefile" accept="audio/*" />
<canvas id="canvas"></canvas>
<audio id="audio" controls></audio>
<iframe src="silence.mp3" allow="autoplay" id="silence_audio" style="display:none"></iframe>
</div>

<script src="./script.js"></script>

</body>

</html>

Note: This will get error on Chrome if you open file directly on your local because of CORS. You need to host your website to a server (Nginx or Apache).



Related Topics



Leave a reply



Submit