I'm trying to make an A/B test comparison for audio. It will be a "demo" version of a song and a real version.
I have them playing and stopping at the same time, but i can't work out the mute toggle. (i have it as two buttons now, but ideally i'd love to have one button that will mute one audio and unmute the other, and vice versa on reclick. Sorry i'm still learning js so any help would be awesome!)
I have what i have so far in a jsfiddle
https://jsfiddle.net/nickdulac/36r22svz/
html
<audio id="audio1" muted controls>
<source src="http://dl.dropbox.com/u/1538714/article_resources/cat.m4a" type="audio/mpeg" />
<source src="http://dl.dropbox.com/u/1538714/article_resources/cat.ogg" type="audio/ogg" />
</audio><br />
<audio id="audio2" controls>
<source src="http://dl.dropbox.com/u/1538714/article_resources/song.m4a" type="audio/mpeg" />
<source src="http://dl.dropbox.com/u/1538714/article_resources/song.ogg" type="audio/ogg" />
</audio><br />
<button onclick="play();">Play</button><br />
<button onclick="stop();">Stop</button><br />
<button onclick="mute1();">Mute 1</button><br />
<button onclick="mute2();">Mute 2</button><br />
js
var play = function() {
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.play();
audio2.play();
}
var stop = function() {
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.pause();
audio2.pause();
}
var mute1 = function() {
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.volume() = 1;
audio2.volume() = 0;
}
var mute2 = function() {
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.volume() = 0;
audio2.volume() = 1;
}
p.s. i have random audio in there for now!
Simply have a global variable. a flag that knows the current status and work accordingly. (ADDED MUTE)
Two different Mute buttons
Please check this fiddle : https://jsfiddle.net/36r22svz/6/
Single Mute Toggle
Please check this fiddle : https://jsfiddle.net/36r22svz/7/
HTML
<audio id="audio1" controls>
<source src="http://dl.dropbox.com/u/1538714/article_resources/cat.m4a" type="audio/mpeg" />
<source src="http://dl.dropbox.com/u/1538714/article_resources/cat.ogg" type="audio/ogg" />
</audio><br />
<audio id="audio2" controls>
<source src="http://dl.dropbox.com/u/1538714/article_resources/song.m4a" type="audio/mpeg" />
<source src="http://dl.dropbox.com/u/1538714/article_resources/song.ogg" type="audio/ogg" />
</audio><br />
<button onclick="play();" id="button1">Play</button><br />
<button onclick="mute();" id="button2">Mute</button><br />
JS
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
var button1 = document.getElementById('button1');
var isPlaying = false;
var muteToggle = true;
var play = function() {
if(!isPlaying){
button1.innerHTML = 'Pause';
audio1.play(); // this stream will immediately stop when the next line is run on iOS
audio2.play(); // this will stop audio1 on iOS
isPlaying = true;
} else {
button1.innerHTML = 'Play';
audio1.pause(); // this stream will immediately stop when the next line is run on iOS
audio2.pause(); // this will stop audio1 on iOS
isPlaying = false;
}
}
var mute = function(){
if(muteToggle){
muteToggle = false;
audio1.muted = true;
audio2.muted = false;
} else {
muteToggle = true;
audio2.muted = true;
audio1.muted = false;
}
}
I think adding this (very simple) funtion and calling to it from one button it should work.
Add this to your Javascript
var muted = 'on';
var button = document.getElementById(mutebut);
function muteorplay(){
if (muted == 'on'){
mute1()
muted='off';
button.innerHTML='Mute 1';
}else{
mute2()
muted='on';
button.innerHTML='Mute 2';
}
}
And replace the two mute buttons with this one
<button onclick="muteorplay();" id="mutebut">Mute 2</button><br />
Related
I have added an audio to my website, which is playing when site is opened. Now I want add play/pause button to toggle the audio.
This is how I tried it:
<audio id="myAudio" autoplay >
<source src="mp3/background-music.mp4" type='audio/mp4'>
Your user agent does not support the HTML5 Audio element.
</audio>
<a type="button" class="play-pause" title="play/pause"><i class="fa fa-pause"></i></a>
<script type="text/javascript">
$(document).ready(function() {
var playing = false;
$('a.audio-btn').click(function() {
if (playing == false) {
document.getElementById('myAudio').play();
playing = true;
$(this).text("stop sound");
} else {
document.getElementById('myAudio').pause();
playing = false;
$(this).text("restart sound");
}
});
});
</script>
But its not working for me. Can anybody tell me where I have gone wrong?
For demo purpose, i add video tag, to work with audio you can replace video to audio tag and Use
$('.play-pause')
Instead of
$('a.audio-btn')
For audio use this at the place of video tag :
<audio id="myAudio" autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='audio/mp4'>
Your user agent does not support the HTML5 Audio element.
</audio>
$(document).ready(function () {
var playing = true;
$('.play-pause').click(function () {
if (playing == false) {
document.getElementById('myAudio').play();
playing = true;
$(this).text("Sop Sound");
} else {
document.getElementById('myAudio').pause();
playing = false;
$(this).text("Restart Sound");
}
});
});
a {
background: #000;
color: #fff;
cursor: pointer;
padding: 10px;
}
video {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myAudio" autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='video/mp4'>
Your user agent does not support the HTML5 Audio element.
</video>
<a type="button" class="play-pause" title="play/pause">Play / Pause</a>
Change your $('a.audio-btn') into $('a.play-pause').
What exactly is not working? Does the button not appear, does it not function?
I would suggest using something like the following:
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause()
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
I was wondering if it is possible to extract the controls of a video. I mean that instead of being the controls on top of the video, that these were separate and that the video could be controlled from there. Thank you in advance.
I know you can disable your browser's controls by not setting the attribute controls. see https://www.w3schools.com/TAgs/att_video_controls.asp
Then you can define your own custom controls by adding event handlers to the UI elements you wish to use for controlling playback.
function playBtnHandler(event) {
myVideo.play();
}
myBtn.addEventListener("click", playBtnHandler);
U can try this...............
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>
</head>
<body>
<video id="Video1" autoplay>
// Replace these with your own video files.
<source src="1.mp4" type="video/mp4" />
Download the video file.
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
I have an audio file that plays when an anchor tag is clicked. If the anchor tag is clicked again, I want the audio to pause, I just don't know enough about javascript to pull this second half off. I don't want to change the content of the anchor tag they click, I just want the audio file to start and pause whenever they click the tag.
This is what I have so far, which at least makes the sound file playable:
<audio id="audio" src="/Demo.mp3"></audio>
<a onClick="document.getElementById('audio').play()">Click here to hear.</a>
A Vanilla Javascript way to do what you required.
Note: I've noticed comments on other question with multiple upvotes for a native js approach and saw the OP has no jquery tag.
So WORKING EXAMPLE:
SOLN 1: (my initial soln using events)
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
function togglePlay() {
isPlaying ? myAudio.pause() : myAudio.play();
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>
SOLN 2: (using myAudio.paused property based on dandavi's comment)
var myAudio = document.getElementById("myAudio");
function togglePlay() {
return myAudio.paused ? myAudio.play() : myAudio.pause();
};
<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>
var audioElement= document.getElementById("audio-player");
function togglePlay() {
if (audioElement.paused) {
audioElement.play();
}
else {
audioElement.pause();
}
};
You could use jQuery to make a toggle for this.
<a id="music-button" style="cursor:pointer;">
<img src="http://i.stack.imgur.com/LT3WE.png"></a>
<audio id="playMusic" autoplay>
<source src="sound.mp3">
</audio>
<script type="text/javascript">
$('#music-button').toggle(
function () {
document.getElementById('playMusic').play();
},
function () {
document.getElementById('playMusic').pause();
}
);
</script>
the myAudio variable has to be inside the function call...It works fine
function togglePlay() {
var myAudio = document.getElementById("myAudio");
return myAudio.paused ? myAudio.play() : myAudio.pause();
};
<audio
id="myAudio" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto">
</audio>
<input type="button" value="sound" onclick="togglePlay()" />
var Sample-Audio = document.getElementById("Sample");
function togglePlay() {
return Sample-Audio.paused ? Sample-Audio.play() : Sample-Audio.pause();
};
<audio id="Sample" preload="auto">
<source src="./sounds/rain.mp4" type="audio/mp4">
<source src="./sounds/rain.ogg" type="video/ogg">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>
HTML
<audio controls autoplay class="bgsound">
<source src="audio/motivational-day-112790.mp3" type="audio/wav" />
<source src="audio/motivational-day-112790.mp3" type="audio/wav" />
<source src="audio/motivational-day-112790.mp3" type="audio/wav" />
Your browser does not support the audio element.
</audio>
Javascript
var audioClass = document.querySelector(".bgsound");
document.querySelector(".play-pause").addEventListener("click",
function () {
if (audioClass.paused) {
audioClass.play();
} else {
audioClass.pause();
}
});
I tried below code to play a sound in JavaScript for certain times but with no success, the sound plays just once, what is the problem?
for(var i = 0; i < errors; i++){
PlaySound3();
}
Function:
function PlaySound3() {
var audioElement = document.getElementById('beep');
audioElement.setAttribute("preload", "auto");
audioElement.autobuffer = true;
audioElement.load();
audioElement.play();
};
HTML code:
<audio id="beep">
<source src="assets/sound/beep.wav" type="audio/wav" />
</audio>
If you want to play the sound infinitely use the attribute loop in the tag audio :
<audio id="beep" loop>
<source src="assets/sound/beep.wav" type="audio/wav" />
</audio>
Edit
If you want to stop the loop after 3 times, add an event listener :
HTML:
<audio id="beep">
<source src="assets/sound/beep.wav" type="audio/wav" />
</audio>
JS:
var count = 1
document.getElementById('beep').addEventListener('ended', function(){
this.currentTime = 0;
if(count <= 3){
this.play();
}
count++;
}, false);
I have many audio elements on a single page and I want to play just one element at a time. That is if one audio element is playing and I click on play on another element, the previous audio element should pause.
I found a jQuery code from another question to do this but that uses an image as play/pause controls. I'm using the inbuilt controls='controls' attribute for the audio element instead. Is it possible to use jQuery to control the play/pause feature for the audio element in my case?
Here is my HTML code
<div>
<p class="song"><h3><strong>#1 Intro - The Oath</strong></h3><p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
<div>
<p class="song"><h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3></p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
Here is the jQuery code
$(document).ready(function() {
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
});
The jQuery code doesn't seem to be working for me.
$(function(){
$("audio").on("play", function() {
$("audio").not(this).each(function(index, audio) {
audio.pause();
});
});
});
See sample at JSFiddle
Vanilla JS solution
Here's a solution that doesn't require jQuery.
function onlyPlayOneIn(container) {
container.addEventListener("play", function(event) {
audio_elements = container.getElementsByTagName("audio")
for(i=0; i < audio_elements.length; i++) {
audio_element = audio_elements[i];
if (audio_element !== event.target) {
audio_element.pause();
}
}
}, true);
}
document.addEventListener("DOMContentLoaded", function() {
onlyPlayOneIn(document.body);
});
Some things to note:
Because this listens for events on a parent element, not on the audio elements themselves, they can be added or removed after the page is loaded and it will still work.
It watches for the play event in the capture phase because play events don't bubble.
More media events are described here on MDN.
Listening for "DOMContentLoaded" should work for most browers.
Little Modification to LostInComputer's Answer
In Your HTML Write:
<audio controls onplay="pauseOthers(this);" >
<source src="SourcePath">
</audio>
In Js Write:
function pauseOthers(ele) {
$("audio").not(ele).each(function (index, audio) {
audio.pause();
});
}
Assuming that your syntax for stopping and pausing tracks is correct (I don't know anything about the audio element), you should be able to do something like this:
$(".playback").click(function(e) {
// pause all other tracks
$('.audio').each(function () {
var song = this;
if (!song.paused) { song.pause(); }
});
// play the audio associated with this element
this.play();
});
<script>
function controlplay(e) {
document.querySelectorAll('.playback').forEach(item => { if(item.id != e.target.id) item.pause(); });
}
</script>
<script>
document.querySelectorAll('.').forEach(item => { item.addEventListener("play", event => { controlplay(event) })});
</script>
Angular:
<audio (play)="audioPlay($event)" controls preload="none">
<source [src]="url" type="audio/mpeg">
</audio>
audioPlay(e) {
let eAudio = this.domService.getDocument.getElementsByTagName('audio')
if (eAudio && eAudio.length > 0) {
for (var i = 0; i < eAudio.length; i++) {
if(e.target !== eAudio[i]){
eAudio[i].pause();
}
}
}
}
<script>
var nowplaying = null;
// Pause and reset playing audio before starting new selection
function pauseRunningAudio(id) {
if ( nowplaying != null && nowplaying != id) {
var x = document.getElementById(nowplaying);
x.pause();
x.load();
}
nowplaying = id;
}
</script>
<!-- id and function value must be the same -->
<audio controls onplay="pauseRunningAudio('song1')" id="song1">
<source src="Bohemian Rhapsody.mp3" type="audio/mpeg">
</audio>
<audio controls onplay="pauseRunningAudio('song2')" id="song2">
<source src="November Rain.mp3" type="audio/mpeg">
</audio>
<audio controls onplay="pauseRunningAudio('song3')" id="song3">
<source src="Smoke on the Water.mp3" type="audio/mpeg">
</audio>