How to play mp3 after page load? - html

After creating my demo github pages.
I put following code into the index.html file :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My TITLE</title>
<link rel="icon" type="image/x-icon" href="images/icon.ico">
</head>
<body>
<iframe src="2-seconds-silence.mp3" allow="autoplay" id="audio" style="display: none" hidden=""></iframe>
<audio id="player" autoplay loop>
<source src="hello.mp3" type="audio/mp3">
</audio>
</body>
</html>
However after loading the page by chrome, it didn't run.
Is there any way to fix this?

You can try it like that. Attribute list: https://www.w3schools.com/jsref/dom_obj_audio.asp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My TITLE</title>
<link rel="icon" type="image/x-icon" href="images/icon.ico">
</head>
<body>
<iframe src="2-seconds-silence.mp3" allow="autoplay" id="audio" style="display: none" hidden=""></iframe>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var audioTag = document.createElement("AUDIO");
audioTag.setAttribute("src","hello.mp3");
document.body.appendChild(audioTag);
}, false);
</script>
</body>
</html>

Check this:
<audio src="mysong.mp3" id="my_audio" loop="loop"></audio>
<script type="text/javascript">
window.onload=function(){
document.getElementById("my_audio").play();
}

First grab the audio element using Javascript.
for eg : const audio = document.queryselector("#audioId")
then apply funtion window.addEventListener("load",() => {audio.play()})

correct autoplay attribute. Instead of 'autoplay=" "' just leave 'autoplay', same for 'loop'.
Cheers

Related

HTML Background Music Not Working (Embed Tag)

I am trying to add music to my HTML website, but when I run the code, it doesn't work! Any help is apricated. I have the music in the same directory.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<embed name="22 - Edited" src="22 - EDITED.mp3" loop="false" hidden="true" autostart="true">
<div class="main">
<h1>Crimson</h1>
<hr>
Play
</div>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</head>
<body>
<audio id="myAudio" src="./22 - EDITED.mp3" controls>
<hr>
<audio controls id="myAudio">
<source src="./22 - EDITED.mp3" type="audio/ogg">
<source src="./22 - EDITED.mp3" type="audio/mpeg">
</audio>
</body>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</html>
Auto play:
document.getElementById("myAudio").autoplay;
then hide element audio with css attribute:
audio{
display:none;
}

How can I play a online radio in html

The given URL for the radio is https://karthigaifm.radioca.st/streams/64kbps
Stream type is Shoutcast
Port is 12000
I tried with this code, but it is not working.
<audio preload="none" autoplay="autoplay" controls="controls">
<source
src="https://karthigaifm.radioca.st/streams/64kbps;"
/>
</audio>
You need to remove the semicolon at the end of the src string. Like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Audio Test</title>
</head>
<body>
<audio preload="none" autoplay="autoplay" controls="controls" src="https://karthigaifm.radioca.st/streams/64kbps" />
</body>
</html>

Why isn't my page redirecting after video?

Why isn't my page redirecting after the video finishes? Currently, it is live at https://www.eves.website/eve_3.html
After the video finishes, it is supposed to go to https://www.eves.website/eve_4.html
Which is also live. But it just says on eve_3. html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>eve_</title>
<link rel="icon" rel="preload" href="images/evecircle.png" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myVideo").bind('ended', function(){
location.href="https://www.eves.website/eve_4.html";
});
});
</script>
</head>
<body>
<video id="myVideo" style="margin-left:-10px; margin-top:-10px;" width="105%" height="105%" autoplay>
<source src="images/human.mp4" autoplay="true" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
Try this one...
$(document).ready(function(){
$("#myVideo").bind('ended', function(){
window.location.href="https://www.eves.website/eve_4.html";
});
});
It was because it wasn't secure, therefore it wasn't allowing me to redirect to another site.

Is it possible to use YouTube video with HTML video tag?

I'm making website and I need to add video, but not using iframe. Video tag doesn't have this ability I guess, maybe there are some simple alternatives?
Have you tried this code ?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>HTML5 MediaElement - YouTube</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mediaelementjs.com/js/mejs-2.13.1/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://mediaelementjs.com/js/mejs-2.13.1/mediaelementplayer.min.css" />
</head>
<body>
<h1>MediaElementPlayer.js</h1>
<h2>YouTube Wrapper</h2>
<video width="640" height="360" id="player1">
<!-- Pseudo HTML5 -->
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
<span id="player1-mode"></span>
<script>
$('video').mediaelementplayer({
success: function(media, node, player) {
$('#' + node.id + '-mode').html('mode: ' + media.pluginType);
}
});
</script>
</body>
</html>
More info at http://mediaelementjs.com

how to hide html5 player for ipad on done button click

I am playing vide in ipad it is working fine but i want that when user enter done button player should close any idea how to do this. i am using following code.
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<style>
body {margin:0;}
</style>
</head>
<body>
<video width=”1024″ height=”750″ controls=”true”>
<source src=”videos/test.m4v” />
</video>
</body>
</html>
You can find FULL CODE here
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<script>
function onClickDone(){
document.getElementById('myvideotag').pause();
document.getElementById('myvideotag').style.display = "none";
}
</script>
<style>
body {margin:0;}
</style>
</head>
<body>
<button onclick="onClickDone()">Done</button>
<video id="myvideotag" width=”1024″ height=”750″ controls=”true”>
<source src=”videos/test.m4v” />
</video>
</body>
</html>