javascript audio load not letting it pause - javascript

I am building a list of music, and each music has a play button. So when you click play the button turns to pause button.
So when you music plays i want to be able to go down the list and click on another song with the current song stopping and the one i clicked to start.
At the moment i can go down the list and its playing the song but not its not letting me pause . When i click pause it just starts the song again.
here is my code
window.player = document.getElementById('player');
$('ul.tracks li span.play').click(function(){
$('ul.tracks li span.play').find('i').removeClass().addClass('fi-play');
var trackid = $(this).attr('id');
var track;
if(trackid == 'play1'){
track = 'img/music.mp3';
} else if(trackid == 'play2'){
track = 'img/music2.mp3';
} else {
track = 'img/music3.mp3';
}
$('#player_track').attr('src', track);
player.load();
if (player.paused) {
player.play();
$(this).html('<i class="fi-pause"></i>');
} else {
player.pause();
player.empty();
$(this).html('<i class="fi-play"></i>');
}
});
And here is the html
<audio id="player">
<source id="player_track" src="img/music.mp3" />
</audio>
<ul class="tracks">
<li>
<div class="row">
<div class="large-8 columns">1. No Church in the Wild (feat. Frank Ocean)</div>
<div class="large-2 columns"><span class="play" id="play1"><i class="fi-play"></i></span></div>
</div>
<li>
<div class="row">
<div class="large-8 columns">2. Lift Off (feat. Beyonce)</div>
<div class="large-2 columns"><span class="play" id="play2"><i class="fi-play"></i></span></div>
</div>
</li>
<li>
<div class="row">
<div class="large-8 columns">3. Niggas in Paris</div>
<div class="large-2 columns"><span class="play" id="play3"><i class="fi-play"></i></span></div>
</div>
</li>
</ul>
But when i move player.load() into the if statement, i can pause it but when i click on another song while one is playing, it just stops. So what am i doing wrong?

You need to check if the file clicked is the one loaded by the player. You can do that by wrapping the track-setting code and the player.load in this if-statement.
if ($('#player_track').attr('src') !== track){
$('#player_track').attr('src', track);
player.load();
}
The whole code:
window.player = document.getElementById('player');
$('ul.tracks li span.play').click(function(){
$('ul.tracks li span.play').find('i').removeClass().addClass('fi-play');
var trackid = $(this).attr('id');
var track;
if(trackid == 'play1'){
track = 'img/music.mp3';
} else if(trackid == 'play2'){
track = 'img/music2.mp3';
} else {
track = 'img/music3.mp3';
}
if ($('#player_track').attr('src') !== track){
$('#player_track').attr('src', track);
player.load();
}
if (player.paused) {
player.play();
$(this).html('<i class="fi-pause"></i>');
} else {
player.pause();
player.empty();
$(this).html('<i class="fi-play"></i>');
}
});

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>

Progress bar for multiple audio player

I am working on creating a player in a page. In the page there will be multiple players. So progress bar needs to be shown for the current player that is being played. But the issue is when i play the player the progress bar is rendered in some other place because of multiple id's of the progress bar div. How can i target the progress div of the current player that is being played.
I am using javascript to render the progress bar.
Below is the HTML code: There will be multiple html blocks like below in different tabs of the page.
<div class="prabhata-play audio-playlist ">
<div class="d-flex justify-content-between">
<ul class="d-flex list-inline">
<li>
<button class="togglePlay" onclick="togglePlay('1445')" id="toogle1445">
<img src="./play-round.svg" alt="play" class="play-img" id="playImage">
</button>
</li>
<li>
<p class="title">Contentment in professional life</p>
<p class="auth-title">Swami Bhoomananda Tirtha</p>
</li>
</ul>
<div class="d-inline text-end">
<ul class="list-inline d-flex icons-sec">
<li><img src="./video-list.svg" alt="video-list"></li>
<li><img src="./heart.svg" alt="heart"></li>
<li><img src="./download-icon.svg" alt="download"></li>
</ul>
<span class="time-duration">0:39</span>
</div>
</div>
<div class="progress" id="progress1445"></div>
<audio id="audio1445" class="audio-link" src="./AkashavallepaVidooragoham.mp3"></audio>
Javascript Code :
function togglePlay (count, e) {
e = e || window.event;
var btn = e.target;
var timer;
var percent = 0;
var audio1 = document.getElementById("audio"+count);
audio1.addEventListener("playing", function(_event) {
var duration = _event.target.duration;
advance(duration, audio1);
});
audio1.addEventListener("pause", function(_event) {
clearTimeout(timer);
});
var advance = function(duration, element) {
var progress = document.getElementById("progress"+count);
increment = 10/duration
percent = Math.min(increment * element.currentTime * 10, 100);
progress.style.width = percent+'%'
startTimer(duration, element);
}
var startTimer = function(duration, element){
if(percent < 100) {
timer = setTimeout(function (){advance(duration, element)}, 100);
}
}
if (!audio1.paused) {
btn.classList.remove('active');
audio1.pause();
isPlaying = false;
} else {
btn.classList.add('active');
audio1.play();
isPlaying = true;
}
}
Your question is a bit confusing, but I'm assuming the issue is from there being multiple divs with the same id on the page. To fix this, try using document.querySelector() Documentation Here
For example, each player could be like this:
Html:
<div class="prabhata-play audio-playlist " id="player1">
<div class="progress" id="progress1445"></div>
<audio id="audio1445" class="audio-link" src="http://nat.verifinow.in/wp-content/uploads/2021/06/AkashavallepaVidooragoham.mp3"></audio>
</div>
Then in the JS, you could access the progress div using:
document.querySelector("div#player1 > div#progress1445");

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

javascript How to get two toggles on a page to work independently

Hi i currently have two toggles, one is on the sidebar and one is in the main body. They currently work together which is annoying, even though i am using to different scripts. The scripts i am using at the moment for the toggles are almost identical, however, even when using completely different scripts they still work together.
what i mean by work together is when i click the toggle on the main body the side bar toggle reacts.
They are toggles which collapse on oclick.
<script>
var divs = ["Menu", "Add"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
<script>
$(document).ready(function () {
// set up the click event
$('.body > a').on('click', function(){
$(this).next('div').siblings('div:not(#Menu)').hide("1");
});
// trigger orders which has id francc, not orders // .show("1") goes between $(this).next('div') + .siblings
// if i want a transition
$('#Menu').trigger('click');
// options include >>>, but it's slower // $('a[name="account"]').trigger('click');
});
</script>
<!-- sidebar toggle-->
<script>
var divs = ["Order", "Rest", "Franc"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
<!-- Change color on click-->
<script>
$(document).ready(function() {
$('.sidebar h3').on('click', function() {
$('.sidebar h3').css('color', 'black');
$(this).css('color', 'red');
});
$('h3#open').trigger('click'); //Your account red on page load
});
</script>
<!--Your account toggle open on load -->
<script>
$(document).ready(function () {
// set up the click event
$('.sidebar > a').on('click', function(){
$(this).next('div').siblings('div:not(#Franc)').hide("1");
});
// trigger orders which has id francc, not orders // .show("1") goes between $(this).next('div') + .siblings
// if i want a transition
$('#francc').trigger('click');
// options include >>>, but it's slower // $('a[name="account"]').trigger('click');
});
</script>
<div class="sidebar">
<!-- Orders toggle-->
<a id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
<div id="Order" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Overview</li>
</ul>
</div>
</div>
<!--Restaurant toggle-->
<a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
<div id="Rest" style="display: none;"><div>
<ul class="tabs">
<!-- <li id="order" class="rred">restaurant</li>-->
<li id="order" class="rgreen">New restaurant</li>
</ul>
</div>
</div>
<!-- Account toggle-->
<a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3 id="open">Your Account</h3></a>
<div id="Franc" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Blue" >Order History</li>
</ul>
</div>
</div>
</div>
<div id=body>
<!-- Menu toggle -->
<div class="container_head"> <!-- red header top of container-->
<a id="Menu" class="header" href="#" onclick="toggleVisibility('Menu');"><h3>Menu Section</h3></a>
</div>
<div id="Menu_form" style="display: none;">
<form id="MenuForm" action ="javascript:void(0);" method="POST">
<!-- <div class="field">-->
<label for="Name">Name</label>
<input type="text" name="Name" id="Name" placeholder="Steaks pattern="[a-zA-Z]"
required tabindex="1">
<br>
<label for="Description">Description</label>
<input type="text" name="Description" id="Description" placeholder="Fresh USDA Choice steaks, seasoned with hickory-smoked sea salt." tabindex="2">
<br>
<div class="field">
<input type="submit" value="Save">
</div>
</form>
</div>
<a id="add_prod" class="header" href="#" onclick="toggleVisibility('Add');"><h3>Orders</h3></a>
<div id="add" style="display: none;">
</div>
Bringing together #j08691 and Leo Farmer's comments, you need to have unique IDs and function names. When you call toggleVisibility(...), it's going to call the second declaration of that method. Also, when you call document.getElementById(...) on something like "order", it's going to stop at the first instance it finds (In your case, the a tag).
Give your functions unique names, give your items unique IDs (if you want them to all do the same thing, you can look at using the same class for each item), and you should be in a better spot.

Start jPlayer from a text link

I have a jPlayer streaming a radio channel and I'd like to trigger the audio from a text link, besides the "Play" button. Eg: "Let's play some music", where play some music triggers the action of the jPlayer "Play" button.
Here's my HTML markup
<p>Let's play some music</p> <!-- This line will trigger the play button -->
<!-- START JPLAYER -->
<div id="startpage_jplayer" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio-stream">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
<div class="jp-info-bar">
</div>
</div>
<!-- END JPLAYER -->
and this is the JavaScript code
$(function(){
var stream = {
title: "",
mp3: "http://localhost:8000/blurfm"
},
ready = false,
eurlattempts = 0;
$("#startpage_jplayer").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream);
//$.dbg('ready');
},
playing: function(event) {
eurlattempts = 0;
$('#jp_container_1 .jp-info-bar').text('');
},
pause: function() {
$(this).jPlayer("clearMedia");
$(this).jPlayer("setMedia", stream);
//$.dbg('pause');
},
error: function(event) {
if (ready && event.jPlayer.error.type == $.jPlayer.error.URL && eurlattempts<5) {
var self = this;
eurlattempts++;
setTimeout(function(){
$(self).jPlayer("setMedia", stream).jPlayer("play");
},1000);
} else if (ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
} else {
eurlattempts = 0;
$('#jp_container_1 .jp-info-bar').text('Error: '+event.jPlayer.error.message+' '+event.jPlayer.error.hint+' ('+event.jPlayer.error.type+' context '+event.jPlayer.error.context+')' + ( event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET ? 'Y':'N') );
}
},
//solution: "flash,html",
swfPath: "/demo/",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
});
Thanks in advance!
OK, so try this:
You have to add an id attribute to your <a> element first:
<p>Let's play some music</p>
id can be anything, I just named it 'playSomeMusic' for test
then in your javascript add an click event for the <a> element and call the play method for jPlayer like this:
$("#playSomeMusic").click(function(){
$("#startpage_jplayer").jPlayer("play");
});
that's it. this code should work fine. please give it a try and update us on the result

Categories