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
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 got a modal that opens a Youtube video. The modal is set to open whenever you reset the session.
I'm trying to make it so that when you close the modal (either by hitting the "x" or by clicking anywhere outside the modal) the youtube video stops playing, but I'm at a loss.
Here's my code so far:
//resetting/refreshing the session:
jQuery(document).ready(function(){
if (sessionStorage.getItem("story") !== 'true') {
sessionStorage.setItem("story", "true");
$("#myModal").modal();
}
$('#reset-session').on('click',function(){
sessionStorage.setItem('story','');
});
});
//my attempt at stopping the video:
function toggleVideo(state) {
// if state == 'hide', hide. Else: show video
var div = document.getElementById("myModal");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
div.style.display = state == 'hide' ? 'none' : '';
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
}
body {
background-color: #335C64;
margin:10px;
}
h4 {
color: #FFD5C2;
}
.desc {
color: #FFD5C2;
margin-bottom: 4px;
}
.btn-sm {
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<h4>Bootstrap Modal with SessionStorage</h4>
<hr />
<p class="desc">
Click this button to <strong>Refresh</strong> the page.
</p>
<a href="" id="refresh-page" class="btn btn-info btn-sm">
Refresh Page
</a>
<p class="desc">
Click this button to <strong>Reset</strong> and <strong>Refresh</strong> the page.
</p>
<a href="" id="reset-session" class="btn btn-warning btn-sm">
Reset Session
</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-primary">Victor Frankenstein</h4>
</div>
<div class="modal-body">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VZzZKuQUguk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> Close </button>
</div>
</div>
</div>
</div>
Here's a codepen: https://codepen.io/jackcode1/pen/ZEpbRQq
I found an easy, perhaps too easy, solution:
$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});
That's it. I guess I was over complicating this.
Hello I have a 2 buttons trailer and movie, I want to play the video based on the button I clicked.
For example I choose Trailer then it should play trailer and vice versa
here is my button
<button class="btn btn-sm btn-dark" id="trailer" data-toggle="modal" data-target="#myModal2">Trailer</button>
<button class="btn btn-sm btn-dark" id="movieNoads" data-toggle="modal" data-target="#myModal2">Movie</button>
here is my video player and its javascript codes
<video controls playsinline id="player" width="100%">
<script type="text/javascript">
var video = document.getElementById('video');
var source = document.createElement('source');
document.getElementById('trailer').onclick = function () {
source.setAttribute('src', '../inflightapp/storage/app/public/trailer_videos/<?php echo ''.$row2['trailer_video'].''; ?>');
video.appendChild(source);
video.play();
}
document.getElementById('movieNoads').onclick = function () {
source.setAttribute('src', '../inflightapp/storage/app/public/movie_videos/<?php echo ''.$row2['movie_video'].''; ?>');
video.appendChild(source);
video.play();
}
</script>
</video>
You forgot to load the video
"use strict";
console.clear();
const video = document.getElementById("player");
const source = document.createElement("source");
function loadVideo(element, src) {
source.src = src;
element.appendChild(source);
element.load();
element.play();
}
document.getElementById("trailer").addEventListener(
'click',
() => loadVideo(
video,
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/lego.mp4"
)
)
document.getElementById("movieNoads").addEventListener(
'click',
() => loadVideo(
video,
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/abstract-001.mp4"
)
)
<button class="btn btn-sm btn-dark" id="trailer" data-toggle="modal" data-target="#myModal2">Trailer</button>
<button class="btn btn-sm btn-dark" id="movieNoads" data-toggle="modal" data-target="#myModal2">Movie</button>
<video controls playsinline id="player" width="100%" loop></video>
You can have a look at this.
<button class="btn btn-sm btn-dark" id="trailer">Trailer</button>
<button class="btn btn-sm btn-dark" id="movieNoads">Movie</button>
<script type="text/javascript">
var trailer = document.getElementById('trailer');
trailer.setAttribute('data-toggle', 'modal');
trailer.setAttribute('data-target', '#myModal2');
var movieNoads = document.getElementById('movieNoads');
movieNoads.setAttribute('data-toggle', 'modal');
movieNoads.setAttribute('data-target', '#myModal2');
</script>
<video controls playsinline id="player" width="100%">
<script type="text/javascript">
var video = document.getElementById('player');
document.getElementById('trailer').onclick = function () {
document.getElementById("player").style.display = "block";
video.setAttribute('src', 'YouVideoURLHere');
video.play();
}
document.getElementById('movieNoads').onclick = function () { document.getElementById("player").style.display = "block";
video.setAttribute('src', 'YourVideoURLHere');
video.play();
}
document.getElementById("player").style.display = "none";
</script>
</video>
You Can try this
function setvideo(src) {
document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style=" width: 100%;"><source src="'+src+'" type="video/mp4"></video>';
document.getElementById('video_ctrl').play();
}
<!DOCTYPE html>
<html>
<body>
<div id="div_video"> </div>
<button onClick="setvideo('movie.mp4')"> Trailer</button>
<button onClick="setvideo('mov_bbb.mp4')"> Movie</button>
</body>
</html>
Welcome to Stack Overflow. You could try something along the lines of the following:
I used jQuery and Bootstrap (as I noticed you used Bootstrap HTML elements).
//Custom function to populate a modal. This could be expanded on to even add a destination parameter in order to use seperate modals (e.g. function videoModal(destination, source) and replace #myModal2 with the `destination` parameter).
function videoModal(source) {
$("#myModal2 .modal-body").html($("video#player").clone());
//Add your second source:
$("#myModal2 video#player > source").attr("src", source);
$("#myModal2 .modal-body video#player").css("display", "block");
}
$(document).ready(function() {
//On init, save current loaded state of modal
let modalInit = $("#myModal2 .modal-body").html();
//On interaction with a control
$("body").on("click", "button#trailer", function() {
//Populate modal
videoModal("https://www.w3schools.com/tags/movie.mp4");
});
$("body").on("click", "button#movieNoads", function() {
//Populate modal
videoModal("https://www.w3schools.com/html/mov_bbb.mp4")
});
//Reset modal on close
$("#myModal2").on('hidden.bs.modal', function(e) {
$("#myModal2 .modal-body").html(modalInit);
});
});
video#player {
display: none;
margin-left: auto;
margin-right: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<video id="player" controls autoplay loop>
<source src="" type="video/mp4">
</video>
<!-- Button trigger modal -->
<button type="button" id="trailer" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
Trailer
</button>
<button type="button" id="movieNoads" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
Movie
</button>
JSFiddle
This way you could also load the videos inside modals (as I noticed you were trying to use modal buttons). No refreshes are required.
we want make a audio toggle button play and pause like this script.
i have 15000 line and i want add every line audio button with different audio source.
i am using this source now if you gave me good suggestion or new script work for me thankful to you.
i want only one time save javascriptm, make change in html for every line.
if you want to check demo visit now
var count =0;
document.getElementById("toggle-button").onclick = function() {
if(count%2==0){
document.getElementById("player2").play();
document.getElementById("icons").classList.remove("fa-play-circle-o");
document.getElementById("icons").classList.add("fa-pause-circle-o");
}else{
document.getElementById("player2").pause();
document.getElementById("icons").classList.add("fa-play-circle-o");
document.getElementById("icons").classList.remove("fa-pause-circle-o");
}
count++;
}
.d-table {
display:table !important;
}
.d-table-cell {
display:table-cell !important;
}
.w-100 {
width: 100% !important;
}
.w-10 {
width: 8% !important;
}
.tar {
text-align: left !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
<div class="d-table-cell tar w-10">
<audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>
<a id="toggle-button"><i id="icons" class="fa fa-play-circle-o fa-2x"></i></a>
</div>
</div>
The HTML contains duplicate ids. You can substitute clsss for id and use .quesrySelectorAll() and .forEach() to attach click event to each element which plays or pauses <audio> element that is e.target.parentElement.previousElementSibling. The CSS needs to be adjusted as to icon display and toggling.
HTML
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
<div class="d-table-cell tar w-10">
<audio class="player" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>
<a class="toggle-button"><i class="icons" class="fa fa-play-circle-o fa-2x">play</i></a>
</div>
</div>
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
<div class="d-table-cell tar w-10">
<audio class="player" src="http://www.mp3naat.com/download/owais-raza-qadri/mein-jashn-e-aamad-e-sarkar.mp3"></audio>
<a class="toggle-button"><i class="icons" class="fa fa-play-circle-o fa-2x">play</i></a>
</div>
</div>
JavaScript
let toggleButtons = document.querySelectorAll('.toggle-button')
let handleToggle = e => {
console.log(e.target);
let audio = e.target.parentElement.previousElementSibling;
let icon = e.target.parentElement.firstElementChild;
if (audio.paused) {
audio.play();
icon.classList.remove("fa-play-circle-o");
icon.classList.add("fa-pause-circle-o");
} else {
if (!audio.paused) {
audio.pause();
icon.classList.add("fa-play-circle-o");
icon.classList.remove("fa-pause-circle-o");
}
}
}
toggleButtons.forEach(button => button.addEventListener('click', handleToggle));
jsfiddle https://jsfiddle.net/8z9uq5kL/
please help me, play/pause button to one toggle button
mean one time click audio is play second time click then audio is pause with icon change. thanks in advance
.d-table {
display:table !important;
}
.d-table-cell {
display:table-cell !important;
}
.w-100 {
width: 100% !important;
}
.tar {
text-align: left !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
<div class="d-table-cell tar w-10">
<audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>
<a onclick="document.getElementById('player2').play()"><i class="fa fa-play-circle-o fa-2x"></i></a>
<a onclick="document.getElementById('player2').pause()"><i class="fa fa-pause-circle-o fa-2x"></i></a>
</div>
</div>
Try this. It will toggle as well as play and pause on click
var play = false;
var audio=document.getElementById('player2');
function toggle() {
if (play) {
audio.pause()
} else {
audio.play();
}
};
audio.onplaying = function() {
play = true;
};
audio.onpause = function() {
play = false;
};
$(".w-10 >a> #a").click(function(){$(this).toggleClass("fa-play-circle-o fa-pause-circle-o")})
.d-table {
display:table !important;
}
.d-table-cell {
display:table-cell !important;
}
.w-100 {
width: 100% !important;
}
.tar {
text-align: left !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
<div class="d-table-cell tar w-10">
<audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>
<a onclick="toggle()"><i id="a" class="fa fa-play-circle-o fa-2x"></i></a>
</div>
</div>
change your html like this
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
<div class="d-table-cell tar w-10">
<audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>
<a id="toggle-button"><i id="icons" class="fa fa-play-circle-o fa-2x"></i></a>
</div>
</div>
and javascript
<script>
var count =0;
document.getElementById("toggle-button").onclick = function() {
console.log("hello");
if(count%2==0){
document.getElementById("player2").play();
document.getElementById("icons").classList.remove("fa-play-circle-o");
document.getElementById("icons").classList.add("fa-pause-circle-o");
}else{
document.getElementById("player2").pause();
document.getElementById("icons").classList.add("fa-play-circle-o");
document.getElementById("icons").classList.remove("fa-pause-circle-o");
}
count++;
}
</script>