Whever I set
s.loop = true
or with onended event :
s.onended = function()
{
this.currentTime = 0 ;
this.play();
};
it loops a few seconds before the end of the track....
Did anybody here experienced this problem before and found how to fix it ?
(Yes I know webaudio is way better, but it takes ages to decode files on mobiles, so I use it only for short sounds and have to use the nasty old audio element for music.)
If you want to always repeat the audio, and it does not work through Javascript, you can use loop tag in HTML
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
I test your code and play complete sound, then repeat the sound
<audio id="Audio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
<script>
var s = document.getElementById("Audio");
s.loop = true;
</script>
<script>
var s = document.getElementById("Audio");
s.onended = function(){
this.currentTime = 0 ;
this.play();
}
</script>
Related
I have this code, but I do not know how to make the song start from 0:19 seconds. Could you help me out?
<div class="fin-subheading">
· ROLEPLAY ·
<audio id='music' volume='0.5' autoplay controls>
<source src="anonymous.mp3" type="audio/mpeg">
</audio>
</div>
<script>
var audio = document.getElementById("music");
audio.volume = 0.3;
</script>
You can specify a playback range in the src attribute itself. See the docs here:
When specifying the URI of media for an or element,
you can optionally include additional information to specify the
portion of the media to play. To do this, append a hash mark ("#")
followed by the media fragment description.
A time range is specified using the syntax:
#t=[starttime][,endtime]
So instead of:
<source src="anonymous.mp3" type="audio/mpeg">
simply put:
<source src="anonymous.mp3#t=n,m" type="audio/mpeg">
where n and m are the start and end times, respectively.
The range can also be unbounded as well. So you could, for instance do this:
<source src="anonymous.mp3#t=19" type="audio/mpeg">
which will start at 19 seconds and play through till the end; or even this:
<source src="anonymous.mp3#t=,19" type="audio/mpeg">
which will start from the beginning through 19 seconds.
You can use currentTime property
window.onload = function() {
const audio = document.getElementById("music");
audio.volume = 0.3;
audio.currentTime = 19;
audio.play();
}
You need to use canplaythrough event and within that currentTime and then play when that time is reached.
Make sure you do not autoplay in the audio tag in HTML.
<audio id="audio2"
preload="auto"
src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" >
<p>Your browser does not support the audio element</p>
</audio>
<script>
myAudio=document.getElementById('audio2');
myAudio.addEventListener('canplaythrough', function() {
this.currentTime = 19;
this.play();
});
</script>
As the title suggests, I have audio playing automatically in my site, and some visitors have recommended that I create a pause button for it. After trying numerous online javascript based solutions, I have come out with no success. I use the following code for the audio to play:
<audio id= "song" autoplay loop onloadeddata="setHalfVolume()">
<source src="song.mp3" type="audio/mpeg">
</audio>
Add controls to tag <audio>
example:
<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>
HTML:
<audio controls="controls">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the <code>audio</code> element.
</audio>
Source:/
https://www.w3schools.com/html/html5_audio.asp
https://developer.mozilla.org/en/docs/Web/HTML/Element/audio
Jquery;
$(function(){
$('audio').click(function() {
if (this.paused !== false) {
this.play();
} else {
this.pause();
}
});
});
Html
<!-- add a button to control the audio -->
<button id="btn">Pause</button>
Js
var btn = document.querySelector('#btn'),
songAudio = document.querySelector('#song');
btn.addEventListener('click', function () {
if (songAudio.paused) { // toggle the audio and button
songAudio.play();
btn.textContent = 'Pause';
} else {
songAudio.pause();
btn.textContent = 'Play';
}
}, false);
I have a 20 second long HTML5 video loop as the background on my webpage and it is set to autostart. Is it possible to delay the video autoplay for 5 seconds? I am trying to allow the video to load completely before trying to play to prevent it from stuttering as much. Here is my current code:
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/backgroundvideo.mp4" type="video/mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
</video>
Any help is greatly appreciated!!
This is a working solution for me. You should use canplay as a best practice to be sure the browser can play the video. Also, here is a straight javascript solution.
Note: I removed autoplay, an extra closing video tag, and formatted your muted & loop flags.
var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" muted loop>
<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/SsRadVyPGjdkeg9tt/videoblocks-computer-hacking-in-process-cyber-security-concept_h-l3zbu4xb__PM.mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
That would be better to remove autoplay attribute from video tag and add it when you actually need it (meaning in 5 seconds). And if you are willing to preload video, then you should use preload="auto" (not preload="true"), it will load completely while loading a page.
const startVideo = async () => {
const video = document.querySelector('#video_background');
try {
await video.play();
video.setAttribute('autoplay', true);
console.log('video started playing successfully');
} catch (err) {
console.log(err, 'video play error');
// do stuff in case your video is unavailable to play/autoplay
}
}
setTimeout(startVideo, 5000)
Is it possible to detect when the play button in the html5 audio player is clicked?
For example:
<audio controls>
<source src="music.mp3"/>
<source src="music.ogg" />
</audio>
....
....
$('playbutton').on('click', function(e){
//some functions
});
Sounds like (heh) you're looking for the play event.
<audio controls id="player">
<source src="music.mp3">
</audio>
<script>
var player = document.getElementById("player");
player.addEventListener("play", function () {
console.log("it's go time");
});
</script>
For a full list of the available events, at least according to the spec, check out the WHATWG doc
I am developing a HTML5 game for Facebook. I have the following HTML code:
<audio style="visibility: hidden;" controls="controls" id="sound-0">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-1">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-2">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-3">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-4">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-5">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
And the following Javascript that starts the sounds:
if (this.hitFlag > 6) this.hitFlag = 1;
var soundElem = document.getElementById('sound-' + (this.soundFlag % 6) + '0' );
soundElem.play();
Each click of the mouse triggers a sound event. The problem is with Chrome where after dozen of clicks the sounds disappear or start playing with quite a big delay(a dozen of seconds).
But there is no problem when playing in FF or Opera.
It's definitely a bug, but I think it has to do with the actual element and not the sound playing portion. You can easily get around this by preloading your audio, instantiating a new audio object for each playing of a sound, then finally checking the sound objects at each tick to determine whether or not they've finished playing so you can clean up memory.
Preloading is, of course, something like:
var _mySnd = new Audio('my/snd/file/is/here.mp3');
Instantiating is like:
var _sndCollection = [];
var n = _sndCollection.length;
_sndCollection[n] = new Audio();
_sndCollection[n].src = _mySnd.src;
_sndCollection[n].play();
And the cleanup check would be:
for (var i = 0; i < _sndCollection.length; i++)
{
if (_sndCollection[i].currentTime >= _sndCollection[i].duration)
{
_sndCollection.splice(i, 1);
i--;
}
}
I use something like this in my own HTML5 game engine, and it's worked perfectly thus far.