I have many buttons playing many different sounds - each button plays a different mp3 when clicked. Example code:
<a onclick="this.firstChild.play()"><audio src="1.mp3" ></audio>1</a>
For mobile devices I am trying to play all the different sounds from the same mp3 file, so I can preload 1 file and have more instant experience.
So I would need to set the starting point and end point of the mp3 to be played when clicked.
How do I do that using audio html5 or javascript? Working in just chrome is enough...
If i got your question right, you want to play different time stamp of a audio file simultaneously or whenever you want
here is one example which you can use
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:00:00"
>
</audio>Part 1
</a>
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:00:56" >
</audio>Part 2
</a>
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:01:00" >
</audio>Part 3
</a>
you can also give time in seconds instead of timestamp like
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=0"
>
</audio>Part 1
</a>
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=56" >
</audio>Part 2
</a>
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t60" >
</audio>Part 3
</a>
I haven't tested this code, but this should work:
<a id="audioTag1"><audio src="1.mp3" ></audio>1</a>
var canPlay = false;
var audio = document.getElementsByTagName('audio')[0];
document.getElementById('audioTag1').addEventListener('click', function(){
playAudio(15);
});
audio.addEventListener('canplay', function() { // listen for the `canplay`event, to make sure the file is loaded.
canPlay = true; // Set a boolean to "true" once the audio has loaded.
});
function playAudio(time){
audio.currentTime = time; // jump to 15 secs into the file
audio.play(); // I'm not certain if this line is necessary.
}
Make sure you run the JS code in a onload event listener, so the audio tag is loaded when the code is executed.
Related
I'm trying to display many video thumbnails/posters without actually loading the video...
Bascially what I've got is the following:
<div class="col-sm-3" style="padding: 20px;" onclick='location.href="/videoDetails/{{ #video.ID }}"'>
<video width="100%" style="cursor:pointer;"
<source src="/{{ #video.path }}">
Your browser does not support the video tag.
</video>
</div>
That hole thing is in a foreach loop and with that, it loads up to 100 videos on one page...
My problem now is that this gets super slow, the more videos there are load at once..
Now I found this answer on a StackOverflow thread, where it says to use the attribute preload="none" on the video tag... That seems to speed up the loading (because it doesn't preload the videos), however, it doesn't display any image (preview) at all..
In my case, there's no reason to load the hole video though, because (as you can see in the code), the actual video is then displayed on another page, when clicking on the div.
Also, just to make sure you got me right, I want to display the auto generated preview of the first frame of the video. I can't upload a seperate image to display it with the poster attribute, it has to be the default image..
Is there any way I can achieve this? I'm also open to Javascript/jQuery solutions...
You can get video frames in different time periods with append #t in the video source url. But with the attribute preload none value you cannot get the video frames. So You need to use the metadata value in the preload attribute.
These are the three values you can use in the preload attribute:
none - Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.
metadata - Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, tracklist, duration, and so on) is desirable.
auto - Hints to the browser that optimistically downloading the entire video is considered desirable. - Hints to the browser that optimistically downloading the entire video are considered desirable.
You can check the below results with these three values.
<p>metadata</p>
<video width="300" height="150" controls="controls" preload="metadata">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>none</p>
<video width="300" height="150" controls="controls" preload="none">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>auto</p>
<video width="300" height="150" controls="controls" preload="auto">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
I would say that creating so many video HTML elements will affect performance anyhow, loading or not, since the DOM is under quite heavy pressure.
A different (and more advance) approach I would recommend is the following.
If you want that one image will load when the user clicks on it, you can "create" a video in that specific moment, triggering only the video requested.
So:
instead of the video tag, load an image with onclick listener, that will pass an ID to a JS function
when the user clicks it will create the video element.
at the same time, hide the image (or maybe a gif?)
Try to run the snippet here below :)
function myFunction(id) {
var element = document.getElementById(id);
var videlem = document.createElement("video");
element.innerHTML = '';
source = 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4';
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = source;
videlem.appendChild(sourceMP4);
videlem.autoplay = true;
element.appendChild(videlem);
}
<p>Click on the image</p>
<div id="img242">
<img onclick="myFunction('img242')" src="https://blog.majestic.com/wp-content/uploads/2010/10/Video-Icon-crop.png">
</div>
I'm using the following JS code to play an HTML5 custom video and - at the same time - activating an iframe, that will be launched just 27 seconds after the play video button is clicked.
But, I'm experiencing 2 issues:
The play button is requiring 2 clicks to start the video, instead of
just 1
The iframe is randomly activated even when the play video button
isn't clicked (between 25 and 40 seconds after the page is loaded,
randomly)
Any idea why?
<script type="text/javascript">window.onclick=function() {
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click",function(){if(video.paused==true){video.play();
playButton.innerHTML=" ";}else{video.pause();
playButton.innerHTML=" ";}});
}</script>
Here's the html part:
<video class="video-js" id="167868028" preload="false" width="910" height="510" poster="img/snapshot.jpg" data-setup="{}">
<source src="video/vid.mp4" type="video/mp4"></video>
<div class="controls"><button type="button" id="play-pause" class="play"><img src="img/play.png"></button></div>
<iframe id="dwayne" class="whiterussian" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="files/iframe.php"></iframe>
<div id="blackrussian"></div>
You've got the playButton.addEventListener nested inside the window.onclick, could be that's what's causing the two-click requirement.
And the setTimeout is inside window.click but not inside playButton.addEventListener("click"..., meaning clicking the button will not fire it, but clicking the window will, (after 27 seconds).
window.onload=function() {
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click", function()
{
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
if(video.paused==true){
video.play();
playButton.innerHTML=" ";
}else{
video.pause();
playButton.innerHTML=" ";
}
});
}
Haven't tested the code but it should work...
Based on your query, here the simplest way to make it works.
When clicking one time anywhere on the page, the video will start. Then 27 seconds later, the iframe receive a new src url, and then load.
window.onclick=function() {
document.getElementById("167868028").play()
setTimeout(loadFrame, 27000)
}
function loadFrame(){
document.getElementById("dwayne").src = "http://arunranga.com/examples/access-control/"
}
<video id="167868028" width="91" height="51" poster="img/snapshot.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<iframe id="dwayne" frameborder="3" src="" scrolling="yes"></iframe>
This is my header:
I want to add sound affect twice:
on mouseover on a href from (innerlinks)
on click on href from (innerlinks)
I want a different sound onclick and onmouseover.
what is the best way?
thanks!
<div id="HoverHeader">
<div id="SiteHeader">
<div id="MainNav">
<div id="btnNav"><img src="../../../000Frames/site/images/menu-bt.png" alt="menu"/></div>
<uc1:mainNav ID="mainNav1" runat="server" />
<div id="InnerLinks">
תיק עבודות
לקוחותינו
אודותנו
צור קשר
</div>
</div>
</div>
</div>
You can add couple audio tags on page and play them as described in this article - Play Sound on :hover | CSS-Tricks.
<audio>
<source src="audio/beep.mp3"></source>
<source src="audio/beep.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
<script>
var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
audio.play();
});
</script>
That needs JavaScript and an audio tag. This is from http://css-tricks.com/play-sound-on-hover/
For hover sound:
<audio id="hover">
<source src="audio/hover.mp3"></source>
<source src="audio/hover.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var hover = $("#hover")[0];
$(".InnerLinks a").mouseenter(function() {
hover.play();
});
For click sound:
<audio id="click">
<source src="audio/click.mp3"></source>
<source src="audio/click.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var click = $("#click")[0];
$(".InnerLinks a").click(function() {
click.play();
});
Demos at CSS Tricks
CLO meeting notes
I am trying to create a video in my web app and let the user being able to click button on the page to jump to certain farm of the video.
I have something like
<video width="720" height="640" controls>
<source src='/assets/video/test.mp4' type="video/mp4">
</video>
<a href='#'>15 sec mark</a>
<a href='#'>25 sec mark</a>
<a href='#'>35 sec mark</a>
I have looked at js video page
http://www.w3schools.com/tags/ref_av_dom.asp
but it doesn't seem to provide the method or solution for it.
Can anyone given me any suggestions? Thanks a lot!
See this documentation which is more complete :
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(); // Returns the starting time (in seconds)
mediaElement.seekable.end(); // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(); // Returns the number of seconds the browser has played
Using an onclick event on the <a/> tag you should be able to set the currentTime property easily :
<video id="mediaElementID" width="720" height="640" controls>
<source src='/assets/video/test.mp4' type="video/mp4">
</video>
15 sec mark
Check out this docs. mediaElement.currentTime = 15 should do the trick.
So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S
I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});