this is my first post and I have searched a bit for an answer, but haven't come across any solutions.
Basically all I want to do is make onClick="" both start and stop audio with the javascript function, playSound(sound). Here is what I've ended with so far. Right now, no audio plays when I click, but when I test the single code 'song1.play()' by itself the sound plays, but obviously doesn't stop when clicked again. Hopefully this isn't too difficult.
function playSound(sound){
var song1=document.getElementById(sound);
var isPlaying = true;
if (!isPlaying){
isPlaying == true;
song1.play();
}
else{
isPlaying == false;
song1.pause();
}
}
Two small corrections.
a) var isPlaying = true; should be declared globally to retain its values between multiple calls to "OnClick".
b) The == should be changed to = in assignment statements of `isPlaying' variable.
var isPlaying = true;
function playSound(sound){
var song1=document.getElementById(sound);
if (!isPlaying){
isPlaying = true;
song1.play();
}
else{
isPlaying = false;
song1.pause();
}
}
You were comparing the isPlaying variable with true and false, instead of assigning them to the variable. This should work now.
function playSound(sound){
var song1=document.getElementById(sound);
var isPlaying = true;
if (!isPlaying){
isPlaying = true;
song1.play();
}
else{
isPlaying = false;
song1.pause();
}
}
You should use = instead of ==
= is Assignment operator where as == is comparison operator.
You can check if a sound is paused using the paused property:
function playSound(sound) {
var song1 = document.getElementById(sound);
song1.volume = .25; // setting the volume to 25% because the sound is loud
if (song1.paused) { // if song1 is paused
song1.play();
} else {
song1.pause();
}
}
<audio id="sound">
<source src="https://www.w3schools.com/TagS/horse.mp3" type="audio/mp3">
</audio>
<button onclick="playSound('sound')">Play/Pause</button>
Related
my sound is playing when i click the button but it doesnt pause or stop when i reclick it. The alert showing the else block is working however so i'm thinking its the second sc.stream. see code below:
var i = $('.song').attr('id');
var is_playing = false;
$('.song').click(function(){
if(is_playing == false){
SC.stream('/tracks/'+i).then(function(player){
player.play();
});
is_playing = true;
} else {
SC.stream('/tracks/'+i).then(function(player){
player.pause();
});
alert('This alert works when is_playing is true');
is_playing = false;
}
});
You are currently creating two separate streams (and two separate player objects). You will need to create the player first and make it available outside the callback, for example by storing it in a global var:
var i = $('.song').attr('id');
var is_playing = false;
var player;
SC.stream('/tracks/'+i).then(function(stream){
player = stream;
});
$('.song').click(function(){
if(is_playing == false){
player.play();
is_playing = true;
} else {
player.pause();
alert('This alert works when is_playing is true');
is_playing = false;
}
});
I want to toggle audio loop attribute.
<audio id="player" controls><source src="lev.mp3" type="audio/mpeg"></audio>
js
$("#btnloop").click(function(){
var player = $("#player");
if (player.loop == false) {player.loop = true}
else {player.loop = false};
});
This doesn't work.
Solution for me maybe could be another SIMPLE player with a loop button embeded, if any.
Loop is a property of HTMLMediaElement. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop
Your player variable is the jQuery object so if you check your console you should have an error. Try this.
$("#btnloop").click(function(){
var player = $("#player")[0];
if (player.loop == false) {player.loop = true}
else {player.loop = false};
});
Why do not continue to use jQuery?
$("#btnloop").click(function(){
var player = $("#player");
if (player.prop('loop') == false) {
player.prop('loop', true);
} else {
player.prop('loop', false);
};
});
The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">
You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}
Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});
The following code plays and stops an audio file, but only once. (1 x play, 1 x pause). Is there a way to play/pause regularly?
function audioHandler(){
var audio = document.getElementById("myaudio");
if(status == false){
audio.style.display="block";
audio.play();
status = true;
}
else {
audio.style.display="none";
audio.pause();
status = false;
}
}
It´s not that important, but i also want to change the play to a pause icon and backwards...
<img src="play.png">
The problem is the global variable status, since you are using it as a global variable(the window object has a property called status), the value assigned to it will be converted to string.
So when you apply status = false, the real value assigned will be status = 'false'; which will always be truthy, ie 'false' == false will be false so your if block will never get executed again!!!
So just rename the variable status to something else then it should work
var aStatus = false;
function audioHandler() {
var audio = document.getElementById("myaudio");
var audioimg = document.getElementById("myaudioimg");
if (aStatus == false) {
audio.style.display = "block";
audio.play();
aStatus = true;
audioimg.src = "pause.png"
} else {
audio.style.display = "none";
audio.pause();
aStatus = false;
audioimg.src = "play.png"
}
}
then
<img id="myaudioimg" src="play.png" />
Hi I have a page with multiple small videos which can be played by clicking on the covering image. How can I stop them playing onclick if there is already one playing? My script is as follows
function PlayVideo(aid, vid)
{
var myVideo = document.getElementsByTagName("video");
if (myVideo.paused) {
document.getElementById(vid).style.display = "block";
document.getElementById(vid).play();
document.getElementById(aid).style.display = "none";
document.getElementById(vid).addEventListener('ended', myHandler, false);
function myHandler(e) {
if (!e) {
e = window.event;
}
document.getElementById(vid).style.display = "none";
document.getElementById(vid).load();
document.getElementById(aid).style.display = "block";
}
} else {
alert("this is an alert");
return false;
}
}
Works fine without the if/else statement but any click starts the movie and then several movies are playing at once how do I define the parameters so that IF any video is playing then a new one will not start.
myVideo is a NodeList, you have to check the value of each video.
var allVideos = document.getElementsByTagName("video");
var areAllPaused = true;
for(var i=0; i < allVideos.length; i++) {
if (!allVideos[i].paused) {
areAllPaused = false;
}
}
you could just use a flag to check, ie
var videoIsPlaying = false;
function playVideo () {
if(videoIsPlaying){
//dont play video
}else{
//play video and set to true
videoIsPlaying = true;
}
}
you'd have to set it on pause etc
document.getElementsByTagName() will return an array with all the video elements in it. To check if any of them is playing you need to loop through the array and check whether any video is playing:
var anyPlaying=false;
for(var i=0;i<myVideo.length;i++){
if(!myVideo[i].paused){
anyPlaying=true;
}
}
if(!anyPlaying){
//...
}else{
return false;
}