The Audio player loads and initializes, but the controls disappear once I pass the third song (see >= 3 test). I'm not certain if that's an incredible coincidence but it seems likely I have broken something. Why do the audio controls vanish?
Also, the volume controls do not initialize. Does anyone know why?
<script>
window.onload = function() {
var number = Math.floor((Math.random() * 10) + 1);
if(number >= 3) {
document.getElementById("audio").innerHTML = "<audio id='vid' src='remix.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>";
} else {
document.getElementById("audio").innerHTML = "<audio id='vid' src='lose.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>";
}
};
(function(){
var vid = document.getElementById("vid");
vid.volume = 0.2;
});
</script>
<script>
jQuery(function($) {
$("#vid").prop('volume', 0.2);
window.setVolume = function(bgAudio,vol) {
sounds[bgAudio].volume = 0.33;
}
});
</script>
<div id="audio">
</div>
There is no need to replace the whole audio tag. Just change the src attribute:
<audio id='vid' src='remix.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>
...
$('#vid').attr('src', 'remix.mp3');
EDIT
Your code is a mess, I've tried to refactor it a bit:
(function() {
var number = Math.floor((Math.random() * 10) + 1);
var player = $('#vid');
player.attr('src', number >= 3 ? 'remix.mp3' : 'lose.mp3');
player.prop('volume', '0.2');
player[0].play(); //run the audio track
//not sure about this function
window.setVolume = function(bgAudio, vol) {
sounds[bgAudio].volume = vol;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<audio id='vid' src='' type='audio/mpeg' loop='true'></audio>
And check mp3 file names and location.
Related
I need to put a YouTube video on this player where it is: https://www.w3schools.com/html/mov_bbb.mp4
I have to put a youtube video embed
I do not know how to do
I'm new to programming if anyone can help I'm struggling
<center><div id="myVideoSources" style="display:none;">
<source class="active" src="https://www.w3schools.com/html/mov_bbb.mp4" id="videoSource" type="video/mp4" startat="00:00:00" endat="00:00:10" name="Something" description="This is Gujarati Videol">
<source class="active" src="https://lh3.googleusercontent.com/lKr008DzBwztuG0f15-hzojP7ACJOlV10WrcFfhp9SWCok4igE4nT
tkCpcETaxvGF5m5tMgZPhkCPyiiueqcdV6d6yR3lM3ERPfRz5jkvrsM_y3xjq1o3GLnazLBEEOUaAbMS86y4g=m22" id="videosource2" type="video/mp4" startat="00:00:00" endat="03:02:02" name="PHP Video " description="This is PHP Video">
</div>
<video id="media-video" controls width="340" height="200"></video>
<script>
$(function () {
var sources = $("#myVideoSources source");
var jVideo = $("#media-video");
var currentVideoNum = 0;
loadNextVideo();
jVideo.bind("ended", function () {
loadNextVideo();
});
function loadNextVideo() {
var source = $(sources.get(currentVideoNum));
currentVideoNum++;
if(currentVideoNum >= sources.length) {
currentVideoNum = 0;
}
jVideo.html("");
jVideo.append(source);
var plainVideo = jVideo.get(0);
plainVideo.load();
plainVideo.play();
plainVideo.currentTime = getStartTime(source);
}
function getStartTime(source) {
var time = 0;
try {
var startAtStr = source.attr("startat");
time = startAtStr.split(":");
time = (time[0] * 3600) + (time[1] * 60) + (time[2] * 1)
} catch(e) {
console.log(e);
time = 0;
}
return time;
}
});
</script></center>
I have array of multiple videos. Right now, the code below works in that it plays multiple videos one after the other. However, they are time agnostic, and I specifically want to play these videos for exactly one hour. How can I achieve this using Javascript?
<body onload="myNewSrc()">
<div id="section-title">
<video onended="myAddListener()" autoplay controls width="100%" height="auto">
<source src="" type="video/mp4">
</video>
</div>
<script>
var videoSources = ["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"http://www.html5videoplayer.net/videos/toystory.mp4",
"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"
];
var currentIndex = 0;
//listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = videoSources[currentIndex];
myVideo.load();
}
function myAddListener() {
var myVideo = document.getElementsByTagName('video')[0];
currentIndex = (currentIndex + 1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
}
</script>
</body>
Add a DOMContentLoaded event listener to body, then inside that get the current time using Date.now() and store it in some variable.
Then compare the stored time to the current time every time a video finishes playing. If more than one hour has elapsed, then end the playback.
You can do something like this
var startTime;
var videoSources =
["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"];
var currentIndex =0;
//listener function changes src
function myNewSrc(){
startTime = new Date;
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src=videoSources[currentIndex];
myVideo.load();
}
function myAddListener(){
if ((new Date) - startTime > (60 * 60 * 1000)) {
return;
}
var myVideo=document.getElementsByTagName('video')[0];
currentIndex=(currentIndex+1)%videoSources.length;
myVideo.src=videoSources[currentIndex];
myVideo.addEventListener('ended',myNewSrc,false);
}
I have an audio file and a javascript for it.
The javascript displays percentage of the audio buffered, if no buffered occurs it displays loading...
function loop2() {
var audio2 = document.getElementById("atwo1");
var percentages = document.getElementsByClassName("atwo1l")
var buffered = audio2.buffered;
var loaded;
if (buffered.length) {
loaded = 100 * buffered.end(0) / audio2.duration;
if (loaded.toFixed(2) != '0') {
percentages[0].innerHTML = 'Loading: ' + loaded.toFixed(2) + '%';
} else {
percentages[0].innerHTML = 'Loading....';
}
}
setTimeout(loop2, 50);
}
loop2();
<audio id="atwo1" controls="controls">
<source src="https://docs.google.com/uc?export=download&id=19gLpR7J8TVHmooVbM23eK5Xq0f9YXNZf">
</audio>
<p><span class="atwo1l"></span></p>
But for the above code, it does not displays loading...
When we place small audio file it will display. So why not for large files?
Update:
Found a partial answer (updated codes)
Why a partial answer?
All comments together in an answer
function loop2() {
var audio2 = document.getElementById("aone1"),
percentages = document.getElementsByClassName("aone1l"),
buffered,
loaded;
if (audio2 && percentages) { // if both elements are found in the DOM
buffered = audio2.buffered;
if (buffered.length) {
loaded = 100 * buffered.end(0) / audio2.duration;
if (loaded.toFixed(2) != '0') {
percentages[0].innerHTML = 'Loading: ' + loaded.toFixed(2) + '%';
}
if(loaded >= 1){
audio2.classList.remove('un-buffered');
}
} else { // handle the case where the buffered.length is 0 or undefined
percentages[0].innerHTML = 'Loading....';
}
}
setTimeout(loop2, 50);
}
I have been working on this HTML5 audio player that tracks the playtime of an audio file. I have gotten it to work on the page, but I cannot seem to make it work when it is called from a popover. I am seeing no errors.
<audio id="player" ontimeupdate='updateTrackTime(this);'>
<source src="http://sifidesign.com/audio/explosion.mp3" type="audio/mp3" />
<script>
document.getElementsByClassName("speaker").onclick = function() {updateTrackTime()};
function updateTrackTime(track){
var currTimeDiv = document.getElementById('currentTime');
var durationDiv = document.getElementById('duration');
var currTime = Math.floor(track.currentTime).toString();
var duration = Math.floor(track.duration).toString();
currTimeDiv.innerHTML = formatSecondsAsTime(currTime);
if (isNaN(duration)){
durationDiv.innerHTML = '00:00';
}
else{
durationDiv.innerHTML = formatSecondsAsTime(duration);
}
}
</script>
</audio>
<div class="speaker"></div>
<span id="currentTime">00:00</span> / <span id="duration">00:00</span>
What else could I try?
Thank you!
—T
Since the popover is created dynamically, you will have to use event delegation.
document.body.addEventListener("click",function(e){
if(e.target.className == "speaker"){
updateTrackTime();
}
});
EDIT
Full working code:
document.body.addEventListener("timeupdate",function(e){
if(e.target.tagName == "AUDIO"){
updateTrackTime(e.target);
}
},true)
function updateTrackTime(track){
var currTimeDiv = document.getElementById('currentTime');
var durationDiv = document.getElementById('duration');
var currTime = Math.floor(track.currentTime).toString();
var duration = Math.floor(track.duration).toString();
currTimeDiv.innerHTML = formatSecondsAsTime(currTime);
if (isNaN(duration)){
durationDiv.innerHTML = '00:00';
}
else{
durationDiv.innerHTML = formatSecondsAsTime(duration);
}
}
function formatSecondsAsTime(secs, format) {
var hr = Math.floor(secs / 3600);
var min = Math.floor((secs - (hr * 3600))/60);
var sec = Math.floor(secs - (hr * 3600) - (min * 60));
if (min < 10){
min = "0" + min;
}
if (sec < 10){
sec = "0" + sec;
}
return min + ':' + sec;
}
#currentTime,#duration{
background:yellow;
}
<audio id="player" autoplay>
<source src="https://megafood.com/wp-content/uploads/2015/07/Erin-Audio-Road-Less-Traveled.mp3" type="audio/mp3" />
</audio>
<div class="speaker"></div>
<span id="currentTime">00:00</span> / <span id="duration">00:00</span>
EDIT
The script is working on your page because it's updating the time in the DOM:
The problem is that since you declared the HTML for the popover, it conflicts with the content that is dynamically-created by the popover because they have the same id. Since the popover content is at the bottom of the page, the script won't change it because there can only be one ID per page and it selects the first one.
I think the easy fix would be to change the IDs to classes for #player, #currTime, #duration
I'm looking for a simple way to temporarily disable a mouseover event, for literally 1000 miliseconds. All my attempts to do so, have so-far failed. I am trying to stop my images from flickering when the mouse enters several times as it hovers over the edge of the div. Here is my code:
var ranNum, result_10, resultFloor, piccy, audio;
function myFunction() {
ranNum = Math.random();
result_10 = (ranNum * 5) + 1;
resultFloor = Math.floor(result_10);
piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />";
document.getElementById("demo").innerHTML = piccy;
audio = document.getElementById("audio");
audio.play();
}
<div id="container">
<div id="demo" onmouseenter="myFunction()">This</div>
<audio id="audio" src="pop.wav" ></audio>
</div>
This will stop the flicker:
var ranNum, result_10, resultFloor, piccy, audio;
var isPlaying = false;
var audio = document.getElementById("audio");
function myFunction() {
if (!isPlaying) {
isPlaying = true;
ranNum = Math.random();
result_10 = (ranNum * 5) + 1;
resultFloor = Math.floor(result_10);
piccy = "<img src=\"http://d2.alternativeto.net/dist/icons/cloudapp_2094.png?width=64&height=64&mode=crop&upscale=false\" />";
document.getElementById("demo").innerHTML = piccy;
// check every 1/2 second to see if the audio has ended
var t = setInterval(function() {
console.log(audio.ended);
if (audio.ended) {
isPlaying = false;
clearInterval(t);
}
}, 500);
audio.play();
}
}
<div id="container">
<div id="demo" onmouseenter="myFunction()">This</div>
<audio id="audio" src="http://freewavesamples.com/files/Casio-MT-45-Pops.wav" ></audio>
</div>
var myFunctionDisabled = null;
function disableMyFunction() {
clearTimeout(myFunctionDisabled);
myFunctionDisabled = setTimeout(function() { myFunctionDisabled = false; }, 1000);
}
function myFunction() {
if (myFunctionDisabled) return;
...
}
Here's a quick and dirty approach. Simply uses a variable referencing a function, and changes the reference to point to a function that does nothing, then back to the original function.
I agree with Kosch's suggestion of using the underscore/lodash debounce function if you're already using those libraries or if you see them helping you in more than just this one case.
var ranNum, result_10, resultFloor, piccy, audio;
function myFunction() {
disableMouseOverHandler();
ranNum = Math.random();
result_10 = (ranNum * 5) + 1;
resultFloor = Math.floor(result_10);
piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />";
document.getElementById("demo").innerHTML = piccy;
audio = document.getElementById("audio");
audio.play();
}
function doNothing() {
}
var mouseOverHandler = myFunction;
function disableMouseOverHandler() {
mouseOverHandler = doNothing;
setTimeout(function(){ mouseOverHandler = myFunction; }, 3000);
//I used 3000ms (3 seconds) to make it more pronounced.
}
<div id="container">
<div id="demo" onmouseenter="mouseOverHandler()">This</div>
<audio id="audio" src="pop.wav" ></audio>
</div>