I need some help, I don't if im over complicating things but I basically have a music player im working on that has 2 tracks. and i have a volume slider im using. when i slide my slider the volume will change they way it should. but when i click on next for the next track to load the volume resets on the music player, . but my slider value stays the same and if i slide my volume afterwords it will update. how can i get the music player to automatically set its volume to my slider values from start when I click on next.
if this sound confusing i put all my code on here so you can check it out. theirs two players for each track so u can see what im talking about. basically if my silder is moved to 0 meaning no sound. each track should be on 0. so if click next, that track should be set to 0 automatically once its loaded.
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title> My audio test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="js/jquery11.js"></script>
<script>
jQuery(document).ready(function(){
i=0;
nowPlaying = document.getElementsByClassName('playsong');
nowPlaying[i].load();
volume =($(this).val(.3));
callMeta();
$('.play').on('click', function() {
nowPlaying[i].play();
callMeta();
});
$('.stop').on('click', function() {
nowPlaying[i].pause();
callMeta();
});
$('.next').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
++i;
nowPlaying[i].load();
nowPlaying[i].volume;
nowPlaying[i].play();
callMeta();
});
$('.prev').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
--i;
nowPlaying[i].load();
nowPlaying[i].play();
callMeta();
});
function callMeta() {
var trackTitle = $(nowPlaying[i]).attr('data-songtitle');
$('.songtitle').html(trackTitle);
var trackArtist = $(nowPlaying[i]).attr('data-songartist');
$('.songartist').html(trackArtist);
var albumart = $(nowPlaying[i]).attr('data-albumart');
$('img.albumart').attr('src', albumart);
}
$("input[type=range]").val($(this).val()); // set value to 6
$('#volume-bar').change(function(evt) {
nowPlaying[i].volume =($(this).val()/100);
$('#newValue').html(nowPlaying[i].volume);
});
})
</script>
</head>
<body>
<audio class="playsong" controls="controls" data-songtitle="love and fluff" data-songartist="nelly" data-albumart= "img/0qXrGPz.jpg" src="Andy Mineo.mp3">
Your browser does not support html audio tag
</audio>
<audio class="playsong" controls="controls" data-songtitle="food for fat kids" data-songartist="chubby" data-albumart= "img/Lecrae_1600x16002-400x400.jpg" src="Derek Minor.mp3">
Your browser does not support html audio tag
</audio>
<img class="albumart" src="img/Aunrey-avatar.jpeg"></img>
<div class="songartist">song title goes here</div>
<div class="songtitle">song title goes here</div>
<div class="play">Play</div>
<div class="stop">Stop</div>
<div class="next">Next</div>
<div class="prev">Prev</div>
<div class="volume">Volume</div>
<input type="range" id="volume-bar" min="0" max="100" step="0.1" value="100">
<div id="newValue" value="0">0</div>
</body>
</html>
Perhaps the only thing needed is to apply the volume - that was already set - to the new called song, take a look in the changes:
$('.next').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
++i;
nowPlaying[i].load();
nowPlaying[i].volume =($("#volume-bar").val()/100); //changed line
nowPlaying[i].play();
callMeta();
});
$('.prev').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
--i;
nowPlaying[i].load();
nowPlaying[i].volume =($("#volume-bar").val()/100); //added line
nowPlaying[i].play();
callMeta();
});
Related
Issue: the volume slider restarts playback after it's been started at least once. This is mostly working as intended except for the volume slider. After 'Play' is run and the audio plays, click 'Stop'. Now drag the volume slider. The audio starts to play again when it shouldn't. I'm a JS newbie and hopefully it's just a syntax issue. Thoughts? Thanks in advance!
var sound01 = new Howl({
src: ['https://viewescape.com/audio/3secLoop_n.wav'],
volume: 0.2,
loop: true,
});
function playAudio() {
if(play.innerHTML=="Play")
{
sound01.volume(0.2);
sound01.stop();
sound01.play();
sound01.fade(0, sound01.volume(), 500);
play.innerHTML="Stop";
}
else{
sound01.fade(sound01.volume(), 0, 500);
play.innerHTML="Play";
sound01.once('fade', function(){
sound01.stop;
});
}
}
function showValue(newValue) {
document.getElementById('rangeAudio').innerHTML=newValue;
sound01.volume(newValue);
}
<script src="https://viewescape.com/test_howler/dist/howler.js"></script>
<html>
<head>
<title>Howler test drive</title>
<meta charset="UTF-8">
</head>
<body>
<button id="play" onclick="playAudio();">Play</button><br>
<input type="range" min="0" max="1" value="0.2" step="0.05" onchange="showValue(this.value)" oninput="showValue(this.value)"/>
<input type="hidden" id="rangeAudio" value="0.2"><br>
</body>
</html>
I'm learning some beginners front end development. I've created a very simple website which utilizes the Lightbox kit. I have worked out how to start an audio track when someone clicks a thumbnail but need some pointers as to how to stop it, or for a more robust solution, play the appropriate track if someone clicks the 'next' arrow. Here is my code so far:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
<script src="js/lightbox-plus-jquery.min.js"></script>
<meta charset="utf-8">
<title>verenti ltd</title>
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta name="author" content="SitePoint">
</head>
<body bgcolor="#F7FBED ">
<div class="gallery">
<a href="images/drake_big.jpg" data-lightbox="mygallery" data-title="nick drake"
onclick=PlaySound("music/drake.mp3")><img src="images/drake_small.jpg"></a>
<a href="images/prine_big.jpg" data-lightbox="mygallery" data-title="john prine"
onclick=PlaySound("music/prine.mp3")> <img src="images/prine_small.jpg"></a>
<a href="images/westerberg_big.jpeg" data-lightbox="mygallery" data-title="paul westerberg"
onclick=PlaySound("music/westerberg.mp3")> <img src="images/westerberg_small.jpg"></a>
<a href="images/townes_big.png" data-lightbox="mygallery" data-title="townes van zandt"
onclick=PlaySound("music/townes.mp3")> <img src="images/townes_small.jpg"></a>
<script>
function PlaySound(path) {
//this function will work like a toggler for sound track playing
var sound = document.getElementById(path);
if(sound && sound.currentTime > 0){ //check whether it is already playing
sound.pause();// stop the sound
sound.currentTime = 0 //
}else if(sound){
//this block to play paused sound track
sound.play();
}else{
//this block to play new sound track
sound= document.createElement('audio');
sound.setAttribute('src', path);
sound.setAttribute('id', path);
sound.play();
}
}
</script>
</div>
</body>
</html>
I think I could be making better use of the tag?
A simple solution will be:
<script>
function PlaySound(path) {
//this function will work like a toggler for sound track playing
var sound = document.getElementById(path);
if(sound && sound.currentTime > 0){ //check whether it is already playing
sound.pause();// stop the sound
sound.currentTime = 0 //
}else if(sound){
//this block to play paused sound track
sound.play();
}else{
//this block to play new sound track
sound= document.createElement('audio');
sound.setAttribute('src', path);
sound.setAttribute('id', path);
sound.play();
}
}
</script>
How to show pop up after 30,60,90,120 ....e.t.c seconds in videojs .I need to use like set time interval like event listener that checks the use is actually seeing the video or not.
$(document).ready(function() {
//Create the instance of the video
var myPlayer = videojs('my-video');
// get the current time of the video
// get
myPlayer.on('play', function() {
alert("You click on play event");
});
myPlayer.on('pause', function() {
alert("You click on pause event");
});
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
console.log(this.currentTime());
});
});
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="//vjs.zencdn.net/5.8/video.min.js" type="text/javascript"></script>
</body>
Don't really understand your question, and I think that #Rob Wood answer is pretty good if you know what to do with the code, but I'm going to do my best:
var playing = false;
var lastPopup = 0;
function showPopup() {
alert("Popup test");
}
function checkPopup(time) {
if (playing && time-lastPopup >= 30) {
showPopup();
lastPopup = time;
}
}
$(document).ready(function() {
var myPlayer = videojs('my-video');
myPlayer.on('play', function() {
playing = true;
});
myPlayer.on('pause', function() {
playing = false;
});
myPlayer.on('timeupdate', function() {
var currentTime = this.currentTime();
checkPopup(currentTime);
});
});
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="//vjs.zencdn.net/5.8/video.min.js" type="text/javascript"></script>
</body>
With this, showPopup() will be called if two conditions met: the video is playing and the difference in seconds since the last popup (or start) is 30 or more.
Hey just change you script as below,
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
var dc = getcurrentTime.toFixed(0);
if(dc != 0 && ((dc%30).toFixed(1)) == 0.0){ // here you can mention your time interval
myPlayer.pause();
$("#hoverDemo").show();
console.log(getcurrentTime+ " ---- "+((dc%30)));
}});
And add two div like below in html,
<div style="position: relative;width:640px;height: 360px">
<div id="user23Demo" style="height:360px;width:640px;">
<video id="my-video" class="video-js" controls preload="auto" style="height:200px;" width="360" height="200" data-setup="{}">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
</div>
<div id="hoverDemo" style="height:50px;position: absolute;top: 10px;background:none;display:none;" align="center">
<div align="center" style="color:white;background: red;max-width: 300px;min-height: 40px;">
<div>You have seen this before.<br/></div>
</div>
</div>
var poll = window.setInterval( function(){
//popup code here
}, 30000 )
Or, adding to the timeupdate event...
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
console.log(this.currentTime());
//assuming getcurrentTime is in seconds...
if( getcurrentTime >= 30 && getcurrentTime < 60 ) {
//popup code here
}
//the rest should be self explanatory. If this function polls every
//second, you could simply use getcurrentTime == 30, etc...
});
I am working on a HTML5 video functionality and I have a question in SO asking the approach to be followed.
Found some semi-helping articles on w3.org website but found a completely working example on jsfiddle.net
Please follow the link here
I am trying the same as follows in my local machine -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var video = document.getElementById('video').play();
var intervalRewind;
$(video).on('play', function () {
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$(video).on('pause', function () {
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$("#speed").click(function () { // button function for 3x fast speed forward
video.playbackRate = 3.0;
});
$("#negative").click(function () { // button function for rewind
intervalRewind = setInterval(function () {
video.playbackRate = 1.0;
if (video.currentTime == 0) {
clearInterval(intervalRewind);
video.pause();
} else {
video.currentTime += -.1;
}
}, 30);
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<video id="video" controls>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
I am not able to find out why and where this script is failing. Is jquerymobile a problem?
Expected: Both Forward and Reverse functionalities should work.
Actual: None of the two buttons are working.
Any help is very much appreciated.
Thanks in advance.
You script worked (more or less), all it took to make it work was to comment out setting playback rate on play event. It was interfering with setting playback rate after clicking fast-forward. Working example here http://jsfiddle.net/h9EVQ/32/
As to the script itself, you should realize, that your rewind implementation has some flaws. One of them is that video is actually paused the whole time, so user can't just press pause to stop rewinding. But that would be easily solvable. The other, bigger issue is, that while doing a rewind you hop back in time by .1 fraction. That may or may be not an issue for some setups/movies. For those shorter movies your rewind function might be to speedy.
I am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). I want to hide the default controls completely. I want the user to only be able to pause/play by clicking on the video. Is this possible? My initial strategy was to overlay a transparent div above the element that would serve as my play/pause button. Below is the HTML and javascript I started, but need a little bit of help. Thanks everyone!
<!-- Video -->
<div style="height:980px;height:540px;">
<div style="z-index:100;position:absolute;">
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
<source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</div>
<div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video -->
<!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
var videoEl = $('#myVideo');
playPauseBtn = $('#imgPoster');
playPauseBtn.bind('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
});
videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->
There's no need for two id attributes in the video tag, and there's no need for a separate source tag if only using one file format, and the video and poster you are linking to does not exist.
Anyway, example below:
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>
<script type="text/javascript">
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
</script>
EDIT: adding a fiddle : http://jsfiddle.net/SKfBY/
Had a quick look at your site, and the video is cool :-)
If you look closely you'll see that there are two jQuery files added, not really the problem here, but you only need one, the second one will make your page load slower.
Also not the problem, but you should consider using the HTML5 doctype like below, as the video element is HTML5, but most browsers will figure it out anyway.
The problem seems to be my fault, jsFiddle automagically inserts the $document.ready function, and I forgot it in my example, that's why it's not working for you.
Here is a complete rundown of how I would write it, I removed both instances of jQuery for you and replaced with Google's version of jQuery, wich is usually a better option, and also you should probably remove any scripts that you don't need, like removing swfObject if the site does not contain any flash files using swfobject etc.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
});
</script>
</head>
<body>
<video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</body>
</html>
This code works for me:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}
But setting the time to 0 rewound the video only; no playback. So I wanted the video to replay after rewinding, and came up with this:
function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}
Here are the buttons:
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
My two-cent's worth...
Cheers