I have a javascript code like below:
<script type="text/javascript" charset="utf-8">
function addmsg(count, play){
if(play == 'true')
{
$("#my_audio").get(0).play();
}
}
</script>
<html>
<audio id="my_audio" src="popsound.mp3"></audio>
</html>
In the above code "play" variable is like a flag containing true or false value, and it plays the sound when play=='true'.The above code is working fine on my laptop browser,but when I'm accessing the page through my mobile the sound doesnt gets played. I did some research but I'm unable to figure out how to do it in my case. I'm very new to this field so sorry if this question is senseless, but can any one please help me. I wanted to make it work fine for mobile browser's too.Thank you in advance.
You need to put different formats for all devices (.ogg and .mp3).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Source : http://www.w3schools.com/html/html5_audio.asp
Related
And if it stops it won't autoplay on reload or opening the site like it should. Once it has stoped it won't even work when i restart the localhost server again. I uploaded my files to github to test if it is something with my local server. So the problem still appears and i have no clue how to solve it since autoplay is active. If someone could help out i would appreciate that. Thanks in advance !
I changed autoplay and loop in the index file to autostart="true" didn't work either so i sticked to autoplay loop. i added buttons to stop the audio if anybody wants to.
<audio id="background-audio" class="background-audio" autoplay loop >
<source class="background-audio" type="audio/mpeg" src="audio/videoplayback7.m4a">
</audio>
var audio = document.getElementById("background-audio")
function belltwo() {
audio.play();
}
function bellthree() {
audio.pause();
}
website link : https://depressedunicorn.github.io/NiRiN/ if you want to test out the problem yourself
yeah already found the solution ^^ but only works on localhost server now: i can now stop the audio restart the page and it will autoplay everytime. but not on github page maybe it takes time for the changes to take effect.
<audio id="background-audio" class="background-audio" autoplay="autoplay" loop="loop">
<source type="audio/mpeg" src="audio/videoplayback7.m4a">
</audio>
<video id="background-video" class="background-video" allowfullscreen="true" muted="true" autoplay="autoplay" playsinline="playsinline" loop="loop">
<source src="/img/beepleloops/beepleDnB93.mp4" type="video/mp4">
I'm trying to play an audio when page is loaded, it should be really simple however i can't accomplish it.
The problem is that it is not playing, i tried checking the state of autoplay (True/False) and it says it does playing when page is loaded although it does not, also tried making a function which will change the auto play state to True but it didnt do anything ...
<html>
<head >
<audio controls autoplay id='myAudio'>
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</head>
<body onload="tryy()">
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
function tryy()
{
var audio = document.getElementById("myAudio");
audio.autoplay = true;
audio.load();
}
</script>
</body>
Also looked up for similar question here and tried thier solution as well but none of them worked.
I'm trying to play an audio when page is loaded, it should be really simple...
Yeah, well, it isn't. Autoplay with sound is largely disabled in all mainstream browsers these days.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
I am currently working on a SharePoint page and trying to put an audio file on my page but it doesn't even display in IE8. It worked fine at the beginning but it is not even displaying now. Just to clarify it works perfectly in Chrome. Do you guys know any alternative that works?
var audio = document.getElementById('mytrack');
setTimeout(function() {
audio.play();
}, 4000);
audio#mytrack {
width:330px;
height:40px;
}
<div id="wrapper">
<audio id="mytrack" controls>
<source src="../downloads/wpw.mp3" type="audio/mp3">
<source src="../downloads/wpw.ogg" type="audio/ogg">
<source src="../downloads/wpwv.wav" type="audio/wav">
</audio>
</div>
You can use audio.js to solve this problem. Not sure if you wanted to use a plugin or not but this does work with IE8. I hope this helps!
Before I ask my question I just wanted to say that I'm a noob to Javascript and to StackOverflow in general so I wanted to apologize in advance if this question is too dumb.
Anyways, I'm learning Javascript and right now I'm experimenting with currentTime, but for some reason song.currentTime is returning undefined, and I also can't set the currentTime. Here is my code:
<audio autoplay>
<source src="A.mp3" type="audio/mpeg" id="awesomeness">
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
function myFunction(){
console.log("letting everything preload by waiting 2 seconds");
var song= document.getElementById("awesomeness");
console.log(song.currentTime);
song.currentTime=30;
}
</script>
Here it is in action (look at the console output): http://dancingcats.azurewebsites.net/
The currentTime property belongs to the audio element(Media)
You need is to set it to the audio element not to the source element
<audio autoplay id="awesomeness">
<source src="A.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me