Looping HTML5 audio with Javascript? [duplicate] - javascript

This question already has answers here:
HTML5 Audio Looping
(10 answers)
Closed 9 years ago.
I am using a very basic HTML5 audio script and I would simply like the song to loop. How can I accomplish this? Thanks in advance!
$(".play").click(function(){
var snd = new Audio("bells.mp3");
snd.play();
});

Specify the loop attribute in your HTML mark-up
<audio loop>
<source src="bells.mp3" type="audio/mpeg">
<audio>
No JavaScript needed

Set the loop property to true
$(".play").click(function(){
var snd = new Audio("bells.mp3");
snd.loop = true;
snd.play();
});

Related

Hiding video controls at end of playback [duplicate]

This question already has answers here:
HTML5 video - show/hide controls programmatically
(3 answers)
Closed 3 years ago.
Default behavior for the html video element causes the video controls to appear at the end of playback. Is there a way to change that behavior so that the video controls remain hidden?
I'm assuming that there is an if statement in the source code that determines if the controls are visible if the video has ended.
I've tried removing the controls when the video ends, but then the controls aren't accessible at all.
player.addEventListener('ended', () => {
player.removeAttribute( 'controls' );
});
I've tried removing the controls and then setting the controls, but the controls still appear.
player.addEventListener('ended', () => {
player.removeAttribute( 'controls' );
player.setAttribute( 'controls', '' );
});
I've also tried just setting the controls to false, but that does the same as removing the attribute 'controls'.
player.addEventListener('ended', () => {
player.controls = false
});
Basically u were almost there. Just use
player.addEventListener('ended', () => {
player.removeAttribute('controls');
});
(removed the video_obj)
I am using the following code to view a video in loop without any controls at all.
<video id="player" autoplay loop muted>
<source src=".../your/source.mp4" type="video/mp4" />
</video>

Playing multiple looping sounds on a website

Is there a 'best way' to play sounds/music on a website? Should I use JS plugin? SWF app or a HTML element? Also I want it to support volume that can be controlled via HTML slider.
If I want to play multiple sounds/music on top of each other do I have to have a 'player' for each one of them or can I have one player playing multiple sounds?
Last time I needed to add sounds to my website was like 10 years ago so I have no idea what techniques people use nowadays.
It's actually very simple. HTML5 makes it easy by introducing the <audio> tag.
This uses the default audio controls:
<audio loop controls><source src="yoursoundhere.mp3" type="audio/mpeg"></audio>
The loop attribute makes it auto-loop. Add the autoplay attribute if you want it to start playing on load. Multiple audio tags play over each other.
Note that this only works with MP3. Otherwise, you need to change the type of file.
If you want a custom slider, here is something you could try:
<audio loop id="audio"><source src="yoursoundhere.mp3" type="audio/mpeg"></audio>
<script>
//When slider value updates.
function updateSlider(){
var audioplayer = document.getElementByID("audio");
var controlvalue = yourHTMLsliderValue();
audioplayer.volume = controlvalue;
}
//First Time.
var audioplayer = document.getElementByID("audio");
var controlvalue = yourHTMLsliderValue();
audioplayer.volume = controlvalue;
</script>
Also note that the supported audio filetypes are .mp3, .ogg, and .wav, and that this only works in HTML5.

HTML5 Video Intro? [duplicate]

This question already has answers here:
Redirect html5 video after play
(7 answers)
Closed 9 years ago.
so I want to have a short video intro for my website then it will go fade out and straight to my main site. Sorta like this: http://www.firecrackerfilms.com/.
This is my Code:
<video id="video" src="Inception.mp4" autoplay height: 100% width=100%>
The video works fine but after it finishes it just stays there and doesn't go to the main page. Any tips or solutions would be greatly appreciated!
Thanks!
In window.onload, bind an event handler to the video element's "ended" event. In that handler, you can either redirect the page or load content with AJAX. Something like:
window.onload= function () {
document.getElementById("video").onended = function () {
// video done playing
};
};

How to change source in html5 video with jQuery [duplicate]

This question already has answers here:
Can I use javascript to dynamically change a video's source?
(10 answers)
changing source on html5 video tag
(19 answers)
Closed 9 years ago.
I have an html5 video streaming and I need to change it source* after some click action. So what i'm doing works, but only in html, i can see source change but it no changing on my display, can you help me? What is wrong? *The source is appending frome xml file.
HTML
<video autoplay loop width="960" height="540" id="video">
<source src="video/movie_01.mp4" id="tv_main_channel">
</video>
JS
btn.on('click', function(){
var tv_main_channel = $('#tv_main_channel'),
d_program_source_mp4 = $(program_self).find("program_source_mp4").text();
tv_main_channel.attr('src', d_program_source_mp4);
}
also i try it with append but it still not work
var video_block = $('#video');
video_block.empty();
video_block.append(
'<source src="'+ d_program_source_mp4 +'">'
);
Thx for help.
See this fiddle: http://jsfiddle.net/qGbzb/2/
To dynamically load videos you need to run
var video_block = $('#video');
video_block.load();
Then you should also see a change in the display too, and not only in the html.
It's simple, just do this:
btn.on("click", function(){
var src = "new_video_src.mp4";
$("#video").find("#tv_main_channel").attr("src", src)
})
You can use like this in click event
var src = "new_video_src.mp4";
$("#tv_main_channel").src=src;
This is the actual method for video tag elements

How to play a sound with JS? [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Playing sound notifications using Javascript?
I'm making a game in JS, and I need a proper way to play a sound when something happens. How do you do that with JS/HTML5? I saw this article, but even with their example, it doesn't really work! Sometimes I do hear that bird, but only for a short time, and I can't get it to work anymore then.
HTML5 has the new <audio>-Tag that can be used to play sound. It even has a pretty simple JavaScript Interface:
<audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">Play it</button>
You can make use of the HTML5 <audio> tag: http://jsfiddle.net/STTnr/.
var audio = document.getElementById('audio');
setTimeout(function() {
audio.play(); // play it through JavaScript after 3 seconds
}, 3000);
HTML:
<audio src="something" id="audio"></audio>
Just hide the element itself:
#audio {
display: none;
}
Do note that no browser supports all formats. This can be frustrating, but you can supply your audio in several formats.

Categories

Resources