how to toggle audio loop attribute - javascript

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

Related

Starting/Stopping sound with javascript onClick

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>

Add code into JS with button click

So I have these buttons that when pressed play a sound, and I wanted to make a button that when pressed would allow these sounds to loop. I dont know how to explain this correctly, so ill just show the code
function aud1play() {
aud1.src = "aud1.mp3";
aud1.play();
}
document.getElementById('aud1button').addEventListener('click', aud1play);
function aud2play() {
aud2.src = "aud2.mp3";
aud2.play();
}
document.getElementById('aud2button').addEventListener('click', aud2play);
function aud3play() {
aud3.src = "aud3.mp3";
aud3.play();
}
document.getElementById('aud3button').addEventListener('click', aud3play);
is there a way to take the names (aud1, aud2, aud3) and put (name).loop; under each of the functions with a button press without having to actually write the (name).loop; for every one?
Try this
JS:
function play(){
var audio = document.getElementById("audio");
audio.play();
}
HTML5:
<audio controls loop id="audio">
<source src="horse.mp3" type="audio/mpeg">
</audio>
You should look at the bind method: https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/
function playAudio(type) {
aud.src = (type === '1') ?
"aud1.mp3" :
(type === "2") ?
"aud2.mp3" :
"aud3.mp3";
aud.play();
}
document.getElementById('aud1button').addEventListener('click', playAudio.bind("1"));
document.getElementById('aud2button').addEventListener('click', playAudio.bind("2"));
document.getElementById('aud3button').addEventListener('click', playAudio.bind("3"));
You could do something like this:
// create an object containing all audio objects
var audios = (function () {
var names = ['aud1.mp3', 'aud2.mp3', 'aud3.mp3'];
var audios = {};
for (var index in names) {
var audio = audios[names[index]] = new Audio();
audio.src = names[index];
}
return audios;
})();
function toggleAudioPlay () {
// "this" refers to the button that was clicked
var name = this.getAttribute('data-audio-src'); // read the button's "data-audio-src" attribute
if (!audios.hasOwnProperty(name)) {
// audio doesn't exist
return;
}
var audio = audios[name];
audio.src = name;
// toggle the play state
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
function toggleAudioLoop () {
var name = this.getAttribute('data-audio-src');
if (!audios.hasOwnProperty(name)) {
// audio doesn't exist
return;
}
var audio = audios[name];
audio.loop = !audio.loop;
}
document.querySelector('.audio-button-toggle-play').forEach(function (button) {
button.addEventListener('click', toggleAudioPlay);
});
document.querySelector('.audio-button-toggle-loop').forEach(function (button) {
button.addEventListener('click', toggleAudioLoop);
});
Now, you could have the following HTML:
<button class="audio-button-toggle-play" data-audio-src="aud1.mp3">Play/Pause the first audio</button>
<button class="audio-button-toggle-play" data-audio-src="aud2.mp3">Play/Pause the second audio</button>
<button class="audio-button-toggle-play" data-audio-src="aud3.mp3">Play/Pause the third audio</button>
<button class="audio-button-toggle-loop" data-audio-src="aud1.mp3">Enable/Disable looping of the first audio</button>
<button class="audio-button-toggle-loop" data-audio-src="aud2.mp3">Enable/Disable looping of the second audio</button>
<button class="audio-button-toggle-loop" data-audio-src="aud3.mp3">Enable/Disable looping of the third audio</button>
That way, you don't have to create a new function for each audio. Just add a new audio file to the "names" array and add a button with a special class (audio-button-toggle-play in order to toggle the play state of an audio) and a data-audio-src attribute containing the location of the audio file.

Play and Pause with onclick on the same Img

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

Play/Pause on onclick, but only once?

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" />

Audio Player mute button (HTML5 and Javascript)

I am trying to create a mute button to my website's custom audio player. Apparently, this simple thing gives me a real headache.
As you see below, I have tried to ad an IF statement to the button. If the volume is on and I press the button, mute the volume. else, if the volume si muted, unmute it.
<audio id="audio" >
<source src="material/audio/sound.mp3"
type='audio/mpeg;
codecs="mp3"'/>
</audio>
<button ID="mute"
onclick="muteAudio()">
<img src="material/images/mute.png"
ID="mute_img"/>
<script type="text/javascript">
function muteAudio() {
var audio = document.getElementById('audioPlayer');
if (audio.mute = false) {
document.getElementById('audioPlayer').muted = true;
}
else {
audio.mute = true
document.getElementById('audioPlayer').muted = false;
}
}
</script>
You need to use == (comparison) rather than = (assignment):
if (audio.mute == false)
{
document.getElementById('audioPlayer').muted = true;
}
else
{
audio.mute = true
document.getElementById('audioPlayer').muted = false;
}
or probably better would be to use the ! (not) operator:
if (!audio.mute)

Categories