We Keep Coding

How to change the dom volume with JQuery

Hey sorry if this question has been answered but im having trouble trying to adjust the dom volume with jQuery here is the code:
<script>
$(document).ready(function() {
slider = document.querySelector("input");
slider.oninput = function() {
progressBar = document.querySelector("progress");
progressBar.value = slider.value;
sliderValue = document.querySelector("span")
sliderValue.innerHTML = Math.round(slider.value);
}
})
</script>
I tried using a selector and then target the volume with .volume but it only adjusted the volume for the first audio tag not all of them.
<script>
$(document).ready(function() {
slider = document.querySelector("input");
slider.oninput = function() {
progressBar = document.querySelector("progress");
progressBar.value = slider.value;
sliderValue = document.querySelector("span")
sliderValue.innerHTML = Math.round(slider.value);
let domConverter = Math.round(slider.value) / 100
const volume = document.querySelector("audio").volume;
document.querySelector("audio").volume = domConverter;
}
})
</script>

First: You are targeting a single element. For multiple element listeners, use querySelectorAll and loop in a forEach (or other iterator)
Second: Rather than element.oninput, use element.addEventListener('input',...
Third, you were mixing jQuery and Vanilla which is fine, but I made it all vanilla for this example.
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll("input[type=range]").forEach(slider => {
slider.addEventListener('input', e => {
progressBar = document.querySelector(".progress");
progressBar.value = e.target.value;
sliderValue = document.querySelector("span")
sliderValue.innerHTML = Math.round(e.target.value);
let domConverter = Math.round(e.target.value) / 100
const volume = document.querySelector("audio").volume;
document.querySelector("audio").volume = domConverter;
})
})
})

Propagation of Script

I probably should not be attempting this, but I have gotten so far and I don't want to give up now. I want to create my own Lightbox type script. I can create an absolute div with the class ligthbox and it covers the page. Then I create a img that is fixed and it animates when loading. The I also have nav arrows to move through the photos. All works accept when I click on the arrows it creates new close X and arrows. I don't understand because the is done through the animation function which is not attached to the arrow function.
I have added event.stopPropagation(); to the arrow function and the animate function but that did not work.
The function that initiates everything.
jQuery(".marks-lightbox img").click( function() {
var Img = jQuery(this),
cImg = Img.attr("src"),
allImg = jQuery(".marks-lightbox img");
//finding the current img from the available images
for(i=0; i < allImg.length; i++) {
if( jQuery(allImg[i]).attr("src") == Img.attr("src") ) {
lbImgCurrent = i;
}
}
makeLightBox()
});
function makeLightBox() {
var bodyHeight = jQuery("body").height(),
lightbox = jQuery("<div>").addClass("lightbox").css({"width":"100vw","height":bodyHeight}),
scrollTop = 72,
lbContainer = jQuery("<div>").addClass("lbContainer"),
lbImg = jQuery(".marks-lightbox img"),
imgSRC = jQuery(lbImg[lbImgCurrent]).attr("src"),
lbClose = jQuery("<span>").addClass("lb-close").text("X");
jQuery("body").prepend(lightbox);
lbContainer.appendTo(".lightbox");
jQuery('<img src="'+ imgSRC +'">').load(function() {
jQuery(this).appendTo(".lbContainer").css("display","none").addClass("lb-image");
var w = jQuery(".lb-image").width(),
h = jQuery(".lb-image").height(),
lbw = lightbox.width(),
margin = (lbw - w) /2;
jQuery(this).appendTo(".lightbox").css({"position":"fixed","display":"block","width":0,"height": 0}).animate({"top":scrollTop,"width":w,"height":h,"margin-left":margin, "margin-right":margin},1000,function(event){
var lbimg = jQuery(this),
lbH = lbimg.height() + 63,
lbLeft = lbimg.offset().left,
lbW = lbimg.width(),
larrow = jQuery("<div><</div>").addClass("left-arrow-lb lb-arrow"),
rarrow = jQuery("<div>></div>").addClass("right-arrow-lb lb-arrow");
larrow.appendTo("body").css({"position":"fixed","top":lbH/2,"left":lbLeft+18});
rarrow.appendTo("body").css({"position":"fixed","top":lbH/2,"left":lbLeft+lbW-90});;
lbClose.appendTo(".lightbox").css({"position":"fixed","top": lbH,"left": lbLeft+lbW - 18});
});
});
}
Here is the click function
jQuery("body").on("click",".left-arrow-lb", function() {
console.log(jQuery(this));
var lbImgLength = jQuery(".marks-lightbox img").length,
lbImg = jQuery(".marks-lightbox img");
lbImgCurrent = (lbImgCurrent < 1 ) ? lbImgLength : lbImgCurrent -1;
var imgSRC = jQuery(lbImg[lbImgCurrent]).attr("src");
console.log(imgSRC);
jQuery(".lb-image").attr("src",imgSRC);
});
Every click creates a load new img scr and animates the photo (unexpectedly) and creates new arrows and close x.

I found it was the on("load"... working every time an image was being loaded. So I created a var reload and set it to true. The in the on(load... function I said if not true return false. In the arrow functions set the reload to false. This prevented the on(load... working reloading.

Is it possible to post process HTML5 video elements audio output with Web Audio Api?

I have an html5 video element and I need to apply different processing realtime on the video's output audio. On desktop I made it work with the WebAudio API. The Api is seemingly present on iOS also. I am able to inspect the created objects, but it doesn't modify the video's output signal.
Here's my example code:
$(function () {
window.AudioContext = window.AudioContext||window.webkitAudioContext;
var audioContext = new AudioContext();
var bufferSize = 1024;
var selectedChannel = 0;
var effect = (function() {
var node = audioContext.createScriptProcessor(bufferSize, 2, 2);
node.addEventListener('audioprocess', function(e) {
var input = e.inputBuffer.getChannelData(selectedChannel);
var outputL = e.outputBuffer.getChannelData(0);
var outputR = e.outputBuffer.getChannelData(1);
for (var i = 0; i < bufferSize; i++) {
outputL[i] = selectedChannel==0? input[i] : 0.0;
outputR[i] = selectedChannel==1? input[i] : 0.0;
}
});
return node;
})();
var streamAttached = false;
function attachStream(video) {
if (streamAttached) {
return;
}
var source = audioContext.createMediaElementSource(video);
source.connect(effect);
effect.connect(audioContext.destination);
streamAttached = true;
}
function iOS_video_touch_start() {
var video = $('#vid')[0];
video.play();
attachStream(video);
}
var needtouch = false;
$('#vid').on('play', function () {
attachStream(this);
}).on('loadedmetadata', function () {
this.play();
this.volume=1.0;
if (this && this.paused) {
if (needtouch == false) {
needtouch = true;
this.addEventListener("touchstart", iOS_video_touch_start, true);
}
}
});
window.panToRight = function(){
selectedChannel = 1;
};
window.panToLeft = function(){
selectedChannel = 0;
};
});
You can also check it on CP:
http://codepen.io/anon/pen/pgeJQG
With the buttons you are able to toggle between the left and the right channels. On desktop browsers (Chrome, Firefox, Safari tested) it works fine.
I have also tried the older createJavaScriptNode() instead of createScriptProcessor(). I have also tried it with an alternative effect chain, which was looking like this:
var audioContext = new (window.AudioContext||window.webkitAudioContext)();
audioContext.createGain = audioContext.createGain||audioContext.createGainNode;
var gainL = audioContext.createGain();
var gainR = audioContext.createGain();
gainL.gain.value = 1;
gainR.gain.value = 1;
var merger = audioContext.createChannelMerger(2);
var splitter = audioContext.createChannelSplitter(2);
//Connect to source
source = audioContext.createMediaElementSource(video);
//Connect the source to the splitter
source.connect(splitter, 0, 0);
//Connect splitter' outputs to each Gain Nodes
splitter.connect(gainL, 0);
splitter.connect(gainR, 1);
//Connect Left and Right Nodes to the Merger Node inputs
//Assuming stereo as initial status
gainL.connect(merger, 0, 0);
gainL.connect(merger, 0, 1);
//Connect Merger output to context destination
merger.connect(audioContext.destination, 0, 0);
As you probably noticed this code was using the built in nodes only. But no luck.
So my questions are: Is this even possible on mobile? If it is, than what am I missing? If it is not, than any possible workaround? Thanks

With Chrome on Android, MediaElementSource is not currently routed to WebAudio. This is a known issue and is planned to be fixed eventually.

Adding a counter to a prev/next image slideshow(javascript/css only)?

I have created a "prev/next" slideshow using javascript, now I want to add a counter(1/10, 2/10, 3/10...) beside my "prev/next" buttons but nothing seemed to work.
This is my first time attempting to make a website, I know nothing about jQuery, so please stick with html+javascript if possible. Here is my script
var image = new Array(
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg",
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg")
var imgNumber=1
var numberOfImg=2
function previousImage(){
if(imgNumber>1){
imgNumber--
}
else{
imgNumber = numberOfImg
}
document.slideImage.src = image[imgNumber-1]
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.slideImage.src = image[imgNumber-1]
}
if(document.images){
var image1 = new Image()
image1.src = "http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg"
var image2 = new Image()
image2.src = "http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg"
}
Script+html: http://jsfiddle.net/nLHY9/5/
(Prev/Next buttons seem not to be working on this----they work fine when I launched them from laptop to browser.)

you could have used some existing javascript image sliders, for example, sliderman slider, for your current code, you can do like, add an element like span, to hold the count, and you could add a function like:
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
and call it in your previousImage() and nextImage() functions, as in this demo jsfiddle

There are many pure css slideshows that are beautiful and can do impressive things. However, as you try to support older browsers, the pure css slideshows get less and less impressive or even impossible. JavaScript is the most flexible and powerful way to go. That being, I wanted to help you clean up your code. I only had a few minutes, so this is a quickly thrown together plugin, but it should get you on the right track.
First, a few notes on your code:
//you're missing semicolons everywhere. ";"
/* "var image" is very unclear.
* it's an array, so it should be plural "images"
* there aren't images in this array - it's image urls or sources
* instead of "new Array" you could just use "[]"
*/
var image = new Array(
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg",
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg")
var imgNumber=1 //the name doesn't mean anything. I have to assume that you mean "currentImgNumber" or something to that effect
var numberOfImg=2 //this could be determined by checking the length of your array - myArray.length
And here's my exampe plugin:
Live demo here (click).
/***** This section is how you use the plugin. I start writing with the usage and then I make it mean something *****/
window.onload = function() { //when the page is loaded
var fooElem = document.getElementById('foo'); //get an element where we will attach the plugin
var foo = Object.create(slideshow); //create a new slideshow object
foo.create({ //create a slideshow with the given options
element: fooElem, //the element where the slideshow will be
sources: [ //image urls
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg",
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg"
]
});
//we can make more of these and with different options
var barElem = document.getElementById('bar');
var bar = Object.create(slideshow);
bar.create({
element: barElem,
sources: [
"http://eggboss.com/wp-content/uploads/2013/09/The-Gentleman-233x300.png",
"http://fc07.deviantart.net/fs71/f/2013/040/8/a/profile_picture_by_classy_like_a_sir-d5uf426.jpg"
]
});
};
/**** now let's create the plugin and make it work as it is used above *****/
var slideshow = {
currentIndex: 0,
imgs: [],
create: function(options) {
options.element.className+= ' slideshow'; //add a class to the main element for styling
this.imgs = this.getImgs(options.sources); //make img html
var controls = this.getControls(); //make controls
//add the html to the element from the options
var frag = document.createDocumentFragment();
this.imgs.forEach(function(img) {
frag.appendChild(img);
});
frag.appendChild(controls);
options.element.appendChild(frag);
},
getImgs: function(sources) {
var imgs = [];
sources.forEach(function(src, i) {
var img = document.createElement('img');
img.src = src;
imgs.push(img);
if (i > 0) {
img.style.display = 'none'; //hide all but first image
}
});
return imgs;
},
getControls: function() {
var that = this; //so that we can access "this" within the click functions
var controls = document.createElement('div');
controls.className = 'controls';
var counter = document.createElement('span');
counter.className = 'counter';
this.setCounter(counter);
var prev = document.createElement('a');
prev.textContent = 'Prev';
prev.className = 'prev';
prev.addEventListener('click', function() {
newIndex = (that.currentIndex) ? that.currentIndex-1 : that.imgs.length-1;
that.changeImg(newIndex, counter);
});
var next = document.createElement('a');
next.textContent = 'Next';
next.className = 'next';
next.addEventListener('click', function() {
newIndex = (that.currentIndex !== that.imgs.length-1) ? that.currentIndex+1 : 0;
that.changeImg(newIndex, counter);
});
controls.appendChild(prev);
controls.appendChild(next);
controls.appendChild(counter);
return controls;
},
changeImg: function(newIndex, counter) {
this.imgs[this.currentIndex].style.display = 'none';
this.imgs[newIndex].style.display = 'inline';
this.currentIndex = newIndex;
this.setCounter(counter);
},
setCounter: function(counter) {
counter.textContent = (this.currentIndex+1)+' / '+this.imgs.length;
}
};

Run native JavaScript function on page load

With the help of you fantastic JavaScript wizards I've got a native JavaScript function that beefs up the size of an HTML5 video when clicking a button and then re-runs whenever the window is resized.
I'd like to remove the button from the equation instead launching it on page load, remove the class name dependencies (if they're still in after button removal), while maintaining the window resize trigger.
Thanks for your help! Couldn't do it without you. A demo can be seen at http://kzmnt.com/test/
JavaScript:
var clicked = document.getElementById("buttonImportant")
var videoContainer = document.getElementById('video_container');
var video = videoContainer.getElementsByTagName('video')[0];
video.style.height="auto";
video.style.width="1280px";
clicked.addEventListener('click',function(){
if( videoContainer.className.lastIndexOf("fullScreen")>=0 ){
videoContainer.className="video-js-box";
video.style.height = "";
video.style.width="";
}
else
{
videoContainer.className="video-js-box fullScreen";
video.style.height = "";
video.style.width="";
}
myResizerObject.prevWidth = video.offsetWidth;
myResizerObject.prevHeight = video.offsetHeight;
myResizerObject.Init();
},false);
var RESIZER = function(){
this.prevWidth = video.offsetWidth;
this.prevHeight = video.offsetHeight;
this.videoContainer = document.getElementById('video_container');
this.video = videoContainer.getElementsByTagName('video')[0];
this.videoStyle = this.video.style;
var ratio = this.video.offsetHeight/this.video.offsetWidth;
var that = this;
this.Init = function(){
if( that.videoContainer.className.lastIndexOf("fullScreen")>=0 )
{
var videoContOffsetWidth = that.videoContainer.offsetWidth;
var videoOffsetWidth = that.video.offsetWidth;
var videoContOffsetHeight = that.videoContainer.offsetHeight;
var videoOffsetHeight = that.video.offsetHeight;
if(that.prevWidth!= videoContOffsetWidth)
{
that.prevWidth = videoContOffsetWidth;
var desired = videoContainer.offsetHeight/videoContainer.offsetWidth;
if(desired>ratio){
that.videoStyle.width=videoContOffsetWidth*desired+videoContOffsetWidth*desired+"px";
that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
}
else{
that.videoStyle.cssText="height:auto;width:100%;left:0px;top:0px;";
}
}
if(that.prevHeight!=videoContOffsetHeight)
{
that.prevHeight = videoContOffsetHeight;
var desired = videoContOffsetHeight/videoContOffsetWidth;
if(desired>ratio){ console.log(ratio);
that.videoStyle.top = '0px';
that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
that.videoStyle.width = videoContOffsetHeight*desired+videoContOffsetHeight/desired+'px';
}
else
{
that.videoStyle.top = -1*(videoOffsetHeight-videoContOffsetHeight)/2+'px';
}
}
}
};
};
var myResizerObject = new RESIZER();
window.onresize = myResizerObject.Init;

Are you looking for something like...
window.onload = mySuperCoolFunction;
And why do you need jQuery? Maybe you could explicitly state your goals/questions at the bottom in bold so that we can help you :)
If you're only looking to init another function, why not just add the call to your superCoolFunction while you're calling your other pre-written jQuery function. For example:
$(document).ready(function() {
center();
mySuperCoolFunction(); // not necessary to init in another file...
});
$(window).load(function(){
center();
mySuperCoolFunction();
});
$(window).resize(function(){
center();
mySuperCoolFunction();
});
Rewritten in jQuery:
$(function() {
$('video').eq(0).css({
height: "auto",
width: "1280px"
});
if ($('#video_container').hasClass('fullScreen')) {
$('#video_container').attr('class', 'video-js-box');
$('video').eq(0).css({
height: "auto",
width: "1280px"
});
}
else {
$('#video_container').attr('class', 'video-js-box fullscreen');
$('video').eq(0).css({
height: "auto",
width: "1280px"
});
}
myResizerObject.prevWidth = video.offsetWidth;
myResizerObject.prevHeight = video.offsetHeight;
myResizerObject.Init();
});