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>
Related
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>
I've setup a play/pause video button in javascript, that was working, but now doesn't and I don't know why. It now only fires once, pausing but not playing.
Basically, the "if" part of my playButton function works correctly, but the "else" part doesn't seem to function correctly. It did previously, so I imagine there's just a missing element somewhere. I have even checked it in a code validator and it passes. What to do?
Please, see my code below...
window.onload = function() {
const video = document.getElementById('intro-video');
const playPause = document.getElementById('play-button');
const enlarge = document.getElementById('full-screen');
const progressBar = document.getElementById('progress-bar');
playPause.addEventListener('click', function playButton() {
if (video.play) {
video.pause()
playPause.innerHTML = 'Play Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
} else {
video.play()
playPause.innerHTML = 'Pause Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
}
});
enlarge.addEventListener('click', function enlarge() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
progressBar.addEventListener('change', function progressBar() {
const time = video.duration * (progressBar.value / 100);
video.currentTime = time;
});
video.addEventListener('timeupdate', function progressTime() {
const value = (100 / video.duration) * video.currentTime;
progressBar.value = value;
});
progressBar.addEventListener('mousedown', function progressPause() {
video.pause();
});
progressBar.addEventListener('mouseup', function progressPlay() {
video.play();
});
};
<!doctype html>
<html lang='en-ZA'>
<head>
<meta charset='UTF-8'>
<title>Alcôve – Discover Opulence</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com'>
<link rel='fonts' href='https://fonts.googleapis.com/css2?family=Work+Sans:wght#400;500;600;700&display=swap'>
<link rel='stylesheet' href='Style.css'>
<script rel='javascript' src='Controls.js'></script>
</head>
<body>
<div id='container'>
<div id='top' class='section dark'>
<div id='row1' class='row'>
<div id='main-menu'>
<ul>
<li><a href='https://alcove.bensmiles.com'>About Us</a></li>
<li><a href='https://alcove.bensmiles.com/committee'>Executive Committee</a></li>
<li><a href='https://alcove.bensmiles.com/news'>The Opulent News</a></li>
<li><a href='https://alcove.bensmiles.com/foundation'>Foundation</a></li>
<li><a href='https://alcove.bensmiles.com/contact'>Contact</a></li>
</ul>
</div>
<div class='column left'>
<div id='logo'>
<img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Logo.svg'>
</div>
<div id='header-headline'>
<p>Alcôve Holdings</p>
<h1>Discover<br>Opulence</h1>
</div>
</div>
<div class='column right'>
<div id='menu-block'>
<img id='header-image' src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Header.png'>
<div id='header-copy'>
<p>Alcôve finds satisfaction in establishing an atmosphere where excellence is celebrated, and confidence is originated. We inspire the youth to lead with precision and passion by igniting their desire to discover opulence through Alcôve.</p>
</div>
<div id='video-console'>
<div id='video-player'>
<video autoplay muted id='intro-video'poster='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Poster.png' width='214px' height='120px'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.mp4' type='video/mp4'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.ogv' type='video/ogv'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.webm' type='video/webm'>
</video>
<div id='video-details'>
<button id='full-screen' type='button'><img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Enlarge.svg'></button>
<div id='video-headline'>
<p>Headline of the video playing</p>
</div>
</div>
</div>
<div id='video-controls'>
<button id='play-button' type='button'>Pause Video</button>
<input id='progress-bar' type='range' value='0'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
video.play references the play method of video. In Javascript, every non-null (non-zero, etc respectively) counts as true. Because the play method exists, it will never go to the else part. Instead, use if (!video.paused).
Just one more thing: decide whether to use semicolons or to not. If you use both styles, it makes the code a bit weird.
Try this:
playPause.addEventListener('click', function playButton() {
if (video.paused || video.ended) {
video.play()
playPause.innerHTML = 'Pause Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
} else {
video.pause()
playPause.innerHTML = 'Play Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
}
});
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()
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>
I am trying to make clone of live channel.
I get video of that specific time from database, load it in player. And seek the video player at played time with jquery and don't let the user seek video forward. After calculating deifference of video's current and ending time i set the page to reload itself after that time to load next video.
My code is working on firefox and internet explorer but not
on chrome.
Here it is HTML
<meta http-equiv="refresh" content="<?php echo $reload_sec; ?>" >
<link href="http://vjs.zencdn.net/5.8.0/video-js.css" rel="stylesheet"
>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<div class="main-content container">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div align="center" class="embed-responsive embed-responsive-4by3">
<video id="my-video" class="video-js embed-responsive-item" controls preload="auto" width="840" height="264" data-setup="{}" autoplay="1">
<source src="<?php echo base_url('uploads/channelvideos/'.$file) ?>" 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>
<button onclick="setCurTime()" type="button" class="btn btn-info" style="margin-top:5px"><span class="fa fa-television"></span> Live</button>
</div>
<div class="col-sm-1">
<input type="text" name="seektime" id="seektime" value="<?php echo $seek_at; ?>" />
</div>
</div>
</div>
<script src="http://vjs.zencdn.net/5.8.0/video.js"></script>
Now Jquery
<script type="text/javascript">
function setCurTime()
{
location.reload();
}
var vid = document.getElementById("my-video");
vid.onloadedmetadata = function()
{
$(window).on("load", function()
{
var seektimej = $("#seektime").val();
if (document.getElementById("my-video"))
{
videojs("my-video").ready(function()
{
var myPlayer = this;
setTimeout(function()
{
//Set initial time to seeked time
myPlayer.currentTime(seektimej);
setTimeout(function()
{
var currentTime = 0;
myPlayer.on("seeking", function(event)
{
if (currentTime < myPlayer.currentTime())
{
myPlayer.currentTime(currentTime);
}
});
myPlayer.on("seeked", function(event)
{
if (currentTime < myPlayer.currentTime())
{
myPlayer.currentTime(currentTime);
}
});
setInterval(function()
{
if (!myPlayer.paused())
{
currentTime = myPlayer.currentTime();
}
}, 10);
}, 50);
}, 50);
});
}
});
};
</script>