Controlling audio player when click on image buttons using jquery - javascript

I have started to create my audio player and would like to control it using images (a play and a stop image).
what i have so far:
audio.html
<div id="audioPlayer">
<audio id="mediPlay" preload="none" controls="controls">
<source src="audio/Crystaligned Dream (Short Version).mp3" type="audio/mpeg">
</audio>
<img class="mediaButton" id="playBtn" src="audio/img/play.png" alt="play"/>
<img class="mediaButton" id="stopBtn" src="audio/img/stop.png" alt="stop" />
</div>
controls.js
$(document).ready(function () {
$('#playBtn').on('click', function () {
$('player').play();
}, false);
$('#stopBtn').on('click', function () {
$('player').stop();
}, false);
});

The DOM player hasn't .stop() function. You should use .pouse() instead. Also the .play() and .pause() functions do work on audio/video element.
$('#playBtn').on('click', function () {
$('audio')[0].play();
});
$('#stopBtn').on('click', function () {
$('audio')[0].pause();
});
$('#playBtn').on('click', function () {
$('audio')[0].play();
});
$('#stopBtn').on('click', function () {
$('audio')[0].pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="audioPlayer">
<audio id="mediPlay" preload="none" controls="controls">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<img class="mediaButton" id="playBtn" src="audio/img/play.png" alt="play"/> <img class="mediaButton" id="stopBtn" src="audio/img/stop.png" alt="stop" />
</div>
If you want to replay audio, use this code
$('audio')[0].currentTime = 0;
$('audio')[0].play();
$('#playBtn').on('click', function () {
$('audio')[0].play();
});
$('#stopBtn').on('click', function () {
$('audio')[0].pause();
});
$('#repBtn').on('click', function () {
$('audio')[0].currentTime = 0;
$('audio')[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="audioPlayer">
<audio id="mediPlay" preload="none" controls="controls">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<img class="mediaButton" id="playBtn" src="audio/img/play.png" alt="play"/>
<img class="mediaButton" id="stopBtn" src="audio/img/stop.png" alt="stop" />
<img id="repBtn" src="audio/img/stop.png" alt="replay" />
</div>

Related

Same functionality without having to remove classes?

I have three HTML 5 audio elements on a page, each with a different ID (sound,1 sound2, sound3). I have a piece of code to trigger those sounds when a div block is clicked but I made some modifications so that there is no need to double click the same div block in order to trigger the code again. The problem is that the modification I made prohibits the code from pausing the audio.
Is there any way of having this same functionality but with the possibility of pausing the audio when the div block is clicked again?
<script type="text/javascript">
$(".play").on('click', function () {
var $this = $(this);
var id = $this.attr('id').replace(/area/, '');
$.each($('audio'), function () {
this.pause();
$(".play").removeClass("active");
});
$this.toggleClass('active');
if($this.hasClass('active')) {
$('audio[id^="sound"]')[id-1].play();
} else {
$('audio[id^="sound"]')[id-1].pause();
}
});
</script>
html as follows
<body class="body-2">
<div class="viewport-div"><a id="muteaudio" href="#" class="mute w-inline-block"></a>
<div class="image-div"><img src="image" loading="lazy" alt="" class="gif" /><a id="2" href="#" class="link-block-3 play w-inline-block"></a><a id="1" href="#" class="link-block-1 play w-inline-block"></a><a id="3" href="#" class="link-block-4 play w-inline-block"></a></div>
</div>
<div class="w-embed w-script">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>>
<script type="text/javascript">
$(".play").on('click', function() {
var $this = $(this);
var id = $this.attr('id').replace(/area/, '');
$.each($('audio'), function() {
this.pause();
$(".play").removeClass("active");
});
$this.toggleClass('active');
if ($this.hasClass('active')) {
$('audio[id^="sound"]')[id - 1].play();
} else {
$('audio[id^="sound"]')[id - 1].pause();
}
});
</script>
<script type="text/javascript">
</script>
<audio id="sound1" src="sound1.mp3"> </audio>
<audio id="sound2" src="sound2.mp3"> </audio>
<audio id="sound3" src="sound3.mp3"> </audio>
</div>
<div class="s-hero-nav-wrapper-2">
<div data-collapse="medium" data-animation="over-right" data-duration="400" role="banner" class="nav-2 w-nav">
<div class="c-1200-2 w-clearfix"><img src="https://assets.website-files.com/60ae8c4857598e31ccef08c2/60af6746a2ede9432d6cdc33_NFTeaLand_logo.png" loading="lazy" width="998" alt="" class="image" />
<nav role="navigation" class="nav-menu-2 w-nav-menu">page1page2</nav>
<div data-w-id="d6104950-09a0-2661-ce3e-80774ebb96bd" class="nav-menu-btn w-nav-button">
<div class="nav-menu-icon w-icon-nav-menu"></div>
</div>
</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=60ae8c4857598e31ccef08c2" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://assets.website-files.com/60ae8c4857598e31ccef08c2/js/webflow.2a88899ee.js" type="text/javascript"></script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
Note that you are removing the active class form all element that has paly class even from current element that has been clicked, by this line: $(".play").removeClass("active");.
So simply you need to check if the element is the current item you shouldn't remove active class:
$.each($('audio'), function (e, el) {
if ("sound" + (id-1) != el.id) {
this.pause();
el.classList.remove("active");
}
});
Here is working snippet:
$(".play").on('click', function (event) {
var $this = $(this);
var id = $this.attr('id').replace(/area/, '');
$.each($('audio'), function (e, el) {
if ("sound" + (id-1) != el.id) {
this.pause();
el.classList.remove("active");
}
});
$this.toggleClass('active');
if ($this.hasClass('active')) {
$('audio[id^="sound"]')[id - 1].play();
} else {
$('audio[id^="sound"]')[id - 1].pause();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<a id="2" href="#" class="link-block-3 play w-inline-block">sound 1</a>
<a id="1" href="#" class="link-block-1 play w-inline-block">sound 2</a>
<a id="3" href="#" class="link-block-4 play w-inline-block">sound 3</a>
<div class="w-embed w-script">
<audio id="sound1" src="https://www.elated.com/res/File/articles/authoring/html/html5-audio/WhiteChristmas.mp3"> </audio>
<audio id="sound2" src="https://www.elated.com/res/File/articles/authoring/html/html5-audio/WhiteChristmas.mp3"> </audio>
<audio id="sound3" src="https://www.elated.com/res/File/articles/authoring/html/html5-audio/WhiteChristmas.mp3"> </audio>
</div>

getting a source for <video src> in html from js script

Im trying to display webms on my homepage in a random order
every time someone access the homepage.
I think, i got the random part done, my problem is,
getting the path string into the source src="" of my html code
my current take on this is:
HTML
<div class="window" id="videos" style="display: none;">
<div class="content">
<center>
<video controls width="500">
<source id="random_webm" src="" type="video/webm">
Your browser does not support HTML5 or .webm video, gramps.
</video>
</center>
</div>
</div>
JS
function random_webm(max) {
var src = ["videos/ship.webm", "videos/ira.webm"];
return random_webm.src = src[Math.floor(Math.random() * src.length)];
src = rndwebm(3);
document.getElementById('random_webm').src = src.rndwebm(3);
};
other things i tried
https://pastebin.com/raw/3Sjpd0gW
concluision - how it works now:
<div class="window" id="videos" style="display: none;">
<div class="header">
<img class="icon" src="images/video.png">
gnu.3gp
<div class="buttons">
<button id= "videos" title="minimize" class="window_content" onclick="videos() ">_</button>
<button>◽</button>
<button id= "videos" title="minimize" class="window_content" onclick="videos() ">X</button>
</div>
</div>
<div class="content">
<center>
<video controls width="500" id="random_webm" src="">
<source type="video/webm">
Your browser does not support HTML5 or .webm video, gramps.
</video>
</center>
</div>
</div>
function videos() {
var src = ["videos/ship.webm", "videos/ira.webm"];
document.getElementById('random_webm').src = src[Math.floor(Math.random() * src.length)];
var x = document.getElementById("videos");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
random_webm()
Try this code, and adapt it to your needs.
function random_webm() {
var src = ["videos/ship.webm", "videos/ira.webm"];
document.getElementById('random_webm').src = src[Math.floor(Math.random() * src.length)];
};
random_webm()

three different images and sounds on hover

I have three images or divs, there is a sound assigned to each image that plays on hover (ambience1 - ambience3). So far it works. But, as of now, the same sound plays, ambience3 to be precise, no matter if I hit image1, image2 or image3. I'm not really familiar with javascript, so I guess it's the js.
Also, I want the sound to stop, not pause, when the cursor leaves the image, and start from the beginning, when the cursor hits the area again. See code below:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image1">
<img class="bottom" src="dcim/20190202_100649 copy.jpg" />
<img class="top" src="dcim/20190202_100649.jpg" />
<audio id="audio1">
<source src="ambience1.mp3"/>
</audio>
</div>
<div id="image2">
<img class="bottom" src="dcim/20190202_102808 copy.jpg" />
<img class="top" src="dcim/20190202_102808.jpg" />
<audio id="audio2">
<source src="ambience2.mp3"/>
</audio>
</div>
<div id="image3">
<img class="bottom" src="dcim/20190202_101713 copy.jpg" />
<img class="top" src="dcim/20190202_101713.jpg" />
<audio id="audio3">
<source src="ambience3.mp3"/>
</audio>
</div>
<script>
var audio = $("#audio1")[0];
$("#image1").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#image1").mouseleave(function() {
audio.pause();
});
</script>
<script>
var audio = $("#audio2")[0];
$("#image2").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#image2").mouseleave(function() {
audio.pause();
});
</script>
<script>
var audio = $("#audio3")[0];
$("#image3").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#image3").mouseleave(function() {
audio.pause();
});
</script>
</body>
Try change var audio to three different names in each <script> tag (like in below snippet (which not works due to lack of images and sounds). The reason of previous behaviour was that your audio variable was global and was override by last script. Use audio.currentTime = 0; before pause to play audio from beginning
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image1">
<img class="bottom" src="dcim/20190202_100649 copy.jpg" />
<img class="top" src="dcim/20190202_100649.jpg" />
<audio id="audio1">
<source src="ambience1.mp3"/>
</audio>
</div>
<div id="image2">
<img class="bottom" src="dcim/20190202_102808 copy.jpg" />
<img class="top" src="dcim/20190202_102808.jpg" />
<audio id="audio2">
<source src="ambience2.mp3"/>
</audio>
</div>
<div id="image3">
<img class="bottom" src="dcim/20190202_101713 copy.jpg" />
<img class="top" src="dcim/20190202_101713.jpg" />
<audio id="audio3">
<source src="ambience3.mp3"/>
</audio>
</div>
<script>
var audio1 = $("#audio1")[0];
$("#image1").mouseenter(function() {
audio1.play();
audio1.loop = true;
});
$("#image1").mouseleave(function() {
audio1.currentTime = 0;
audio1.pause();
});
</script>
<script>
var audio2 = $("#audio2")[0];
$("#image2").mouseenter(function() {
audio2.play();
audio2.loop = true;
});
$("#image2").mouseleave(function() {
audio2.currentTime = 0;
audio2.pause();
});
</script>
<script>
var audio3 = $("#audio3")[0];
$("#image3").mouseenter(function() {
audio3.play();
audio3.loop = true;
});
$("#image3").mouseleave(function() {
audio3.currentTime = 0;
audio3.pause();
});
</script>
</body>

Pause Video when css visibility is none

I have a slideshow of an array of videos. I would like to have them paused when their container is not visible. I have tried several things, including variations of visibility listeners and play/pause commands. I have not had any luck getting this to work.
Here is my html:
<div id="video" class="mySlides"><video class="video" autoplay loop><source src="icx.mp4" type="video/mp4"></video></div>
<div id="widescreen" class="mySlides">
<!--<div id="written"><video autoplay><source src="written.mp4"
type="video/mp4"></video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>-->
</div>
<div id="last" class="mySlides"><video id="player" class="video" autoplay >
<source src="refresh.mp4" type="video/mp4"></video></div>
I was using a counter to loop through the array but I want the videos to start from the beginning so I am refreshing the page when refresh.mp4 ends and using the following to slide through them.
Script.
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 11000);
}
Here is my current javascript attempt to pause the video. I am open to jquery selections also. Even if it did work (which it doesn't) It would only work for 1 element. I would need it to pause all the videos that are not visible.
var videoElement = document.getElementById("player");
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}

Loading HTML Video With jQuery

So what I am trying to to is load different video based on the screen size of the device.
Here is my jQuery:
var v = new Array();
v[0] = [
"header.webm",
"header.ogv",
"header.mp4"
];
v[1] = [
"mobHead.webm",
"mobHead.ogv",
"mobHead.mp4"
];
var src = $('#bgvid source');
if(window.innerWidth >= 642){
src.attr("src", v[0]);
}
if(window.innerWidth <= 641){
src.attr("src", v[1]);
}
Here is my HTML:
<video autoplay="" loop="" poster="" id="bgvid">
<source src="" type="video/webm">
<source src="" type="video/ogg">
<source src="" type="video/mp4">
</video>
Here is the browser output:
<video autoplay="" loop="" poster="" id="bgvid">
<source src="header.webm,header.ogv,header.mp4" type="video/webm">
<source src="header.webm,header.ogv,header.mp4" type="video/ogg">
<source src="header.webm,header.ogv,header.mp4" type="video/mp4">
</video>
You can see where the problem lies. I need it to load them into the proper cascading order and not load them all into the same section.
How can I do this?
Since you already have jQuery in your project, use it:
HTML:
<video autoplay="" loop="" poster="" id="bgvid">
<source id="webmvid" src="" type="video/webm">
<source id="oggvid" src="" type="video/ogg">
<source id="mp4vid" src="" type="video/mp4">
</video>
JS:
var v = [];
v[0] = ["header.webm", "header.ogv", "header.mp4"];
v[1] = ["mobHead.webm", "mobHead.ogv", "mobHead.mp4"];
var index = window.innerWidth <= 641 ? 1 : 0;
$('#webmvid').attr('src', v[index][0]);
$('#oggvid').attr('src', v[index][1]);
$('#mp4vid').attr('src', v[index][2]);
Basically I just made your if-case shorter and targeted each video src with an Id and jQuery.
Try This (add id to each < source > and reference them in js):
HTML:
<video autoplay="" loop="" poster="" id="bgvid">
<source id="src1" src="" type="video/webm">
<source id="src2" src="" type="video/ogg">
<source id="src3" src="" type="video/mp4">
</video>
JS:
v1 = {
webm: "header.webm",
ogv: "header.ogv",
mp4: "header.mp4"
}
v2 = {
webm: "mobHead.webm",
ogv: "mobHead.ogv",
mp4: "mobHead.mp4"
};
if(window.innerWidth >= 642){
$('#src1').attr("src", v1.webm);
$('#src2').attr("src", v1.ogv);
$('#src3').attr("src", v1.mp4);
}
else
{
$('#src1').attr("src", v2.webm);
$('#src2').attr("src", v2.ogv);
$('#src3').attr("src", v2.mp4);
}

Categories