We Keep Coding

Can't reach my audio src to play it with jQuery

I'm doing a test and i want to start a mp3 file with jQuery, i tried many options and it seems that i can't achieve to do it :
Here is my html :
<td><span class="btn btn-sm btn-success btn_player" href="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3" id="player">
<audio id="audio" controls style="display:none"><source src='http://www.uscis.gov/files/nativedocuments/Track%2093.mp3'></audio>
<i class="fad fa-play">
</i></span></td>
as you can see i tried many options
my Jquery code :
$('.btn_player').click(function(event) {
event.preventDefault();
console.log('button audio player clicked');
document.getElementById("audio").play;
});
The btn click action the console.log but don't play any file
here is a test page to see my problem
$('.btn_player').click(function(event) {
event.preventDefault();
console.log('button audio player clicked');
document.getElementById("audio").play;
});
.test {
background-color: green;
width: 2rem;
}
<div class='test'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="btn btn-sm btn-success btn_player" href="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3" id="player">play me
<audio id="audio" controls style="display:none"><source src='http://www.uscis.gov/files/nativedocuments/Track%2093.mp3'></audio>
<i class="fad fa-play">
</i></span></div>

$( document ).ready(function() {
$('.btn_player').click(function(event) {
event.preventDefault();
console.log('button audio player clicked');
document.getElementById("audio").play();
});
});
.test {
background-color: green;
width: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class='test'>
<span class="btn btn-sm btn-success btn_player" href="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3" id="player">play me
<audio id="audio" controls style="display:none"><source src='http://www.uscis.gov/files/nativedocuments/Track%2093.mp3'></audio>
<i class="fad fa-play">
</i></span></div>
Missing play()
$( document ).ready(function() {
$('.btn_player').click(function(event) {
event.preventDefault();
console.log('button audio player clicked');
document.getElementById("audio").play();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class='test'>
play me

Javascript play/pause button for video only pauses

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)'
}
});

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>

Check if a element is visible

I want to check if an element is visible and play a song only when it is, using: a trigger('click') event handler.
Unfortunately, I can't get it working as expected.
What am I doing wrong and how can I fix it?
Here is my JavaScript code (jQuery):
$('.overlay').on('click', function () {
if ($('a.icon-play').is(':hidden') == false) {
$('#stop').trigger('click');
} else {
$('#play').trigger('click');
}
});
Below is my HTML code:
<div class="info">
<div class="player-home-video">
<audio id="yourownlullaby-audio" src="uploads/downloads/Buenas%20%20Noches%20%3C?php%20echo%20$_POST['name'];%20?%3E.mp3"></audio>
</div>
<div class="thumbnail-home-video">
<a href="#" id="play">
<span class="icon-play preview-icon" id="play"></span>
</a>
<a href="#" id="stop">
<span class="icon-pause preview-icon" id="stop"></span>
</a>
<img class="info" src="img/thumbnail-home-video.png" />
<div class="overlay"></div>
</div>
</div>

$('.overlay').on('click', function () {
if ($('a .icon-play').is(':hidden') == true) {
$('#stop').trigger('click');
}
else
{
$('#play').trigger('click');
} });
Your​ if should be the other way.

Controlling audio player when click on image buttons using jquery

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>