Audio Player mute button (HTML5 and Javascript) - 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)

Related

Make same button play/pause html5 video

So i had this working at one point eventually i broke it and now i need to get it working again.
I want for when you press the PLAY button the video will start playing. and the PLAY button will change it text to say PAUSE. Then when you click it again the video will pause.
HTML:
<video id="myVideo" width="1024" height="576">
<source src="myaddiction.mp4" type="video/mp4">
<source src="myaddiction.mp4.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<button id="button" onclick="playPause(); ">PLAY</button>
SCRIPT:
var vid = document.getElementById("myVideo");
function playPause() {
vid.play();
}
function playPause() {
vid.pause();
}
function playPause() {
var change = document.getElementById("button");
if (change.innerHTML == "PLAY") {
change.innerHTML = "PAUSE";
} else {
change.innerHTML = "PLAY";
}
}
Here is also a fiddle with everything in it. If you know how to get a video working in it that'd be cool if you'd add it. Thanks!
https://jsfiddle.net/wb83hydn/
**EDIT: currently the problem is the video wont play when the button is pressed. The button changes text but the video does nothing.
You are defining your playPause function 3 separate times. You are likely to get some unexpected results. That is, if the interpreter doesn't error out completely. You will be better served with just creating one function, and use a global variable to handle the tracking of the play/pause state. Something like this:
var vid = document.getElementById("myVideo");
var isPlaying = false;
function playPause() {
var change = document.getElementById("button");
if (isPlaying) {
vid.pause();
change.innerHTML = "PLAY";
} else {
vid.play();
change.innerHTML = "PAUSE";
}
isPlaying = !isPlaying;
}
Change your javascript to this to make it work.
You'll need to make sure the DOM is loaded first by using window.onLoad or putting the JS at the end of the HTML file.
I updated the JSFiddle, but you'll need a valid online video file to make it work.
var vid = document.getElementById("myVideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
function playPause() {
var change = document.getElementById("button");
if (change.innerHTML == "PLAY") {
change.innerHTML = "PAUSE";
play();
} else {
change.innerHTML = "PLAY";
pause();
}
}
https://jsfiddle.net/wb83hydn/3/
Play and pause video by the same button
document.getElementById("play").onclick = function() {
if(document.getElementById("video").paused){
document.getElementById("video").play();
this.innerHTML ="Pause";
}else{
document.getElementById("video").pause();
this.innerHTML = "Play";
}
}

How do I make the video controls show up in firefox?

When I hover my video control bar in Chrome, Safari it shows up. But when I hover that in firefox, it's not showing. I don't know if my js code doesn't support firefox. But when I inspect it in firefox, the controls keep appearing and disappearing. Below is my code. Can anyone help me with this? Thank you.
HTML
<video poster="http://dummyimage.com/320x205/852285/fff" preload="auto">
<source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4" />
</video>
JS
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.1/js/mediaelement.js'></script>
// Video Player
function videoPlayer() {
// Exit full screen when video is done playing
var video = document.getElementsByTagName("video")[0];
video.addEventListener("ended", function(e) {
video.webkitExitFullScreen()
});
var player = $('.video-player'),
controls = player.find('.vid-play-btn-wrap'),
wrapper = player.find('video'),
video = player.find('video').get(0),
isPlaying = false,
settings = {},
media = new MediaElement(video, settings),
$media = $(media);
$media.on('play', _playHandler);
$media.on('pause', _pauseHandler);
$media.on('ended', _endedHandler);
player.click(_togglePlayPause);
player.hover(_mouseOverHandler, _mouseOutHandler);
function _togglePlayPause() {
isPlaying ? media.pause() : media.play();
}
function _mouseOverHandler() {
if(!isPlaying) { return; }
// controls.fadeIn('fast');
}
function _mouseOutHandler() {
if(!isPlaying) { return; }
// controls.fadeOut('fast');
}
function _endedHandler() {
isPlaying = false;
video.load();
controls.show();
}
function _playHandler() {
isPlaying = true;
controls.hide();
}
function _pauseHandler() {
isPlaying = false;
}
$('video').hover(function toggleControls() {
if (this.hasAttribute("controls")) {
this.removeAttribute("controls")
} else {
this.setAttribute("controls", "controls")
}
});
}
you have this in your script:
player.hover(_mouseOverHandler, _mouseOutHandler);
So BOTH functions are executed on hover (which explains the appearing and disappearing). It might be better to create ONE function that contains both things you want in an if/else statement

how to toggle audio loop attribute

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

Change onclick() function multiple times (play/pause image change)

<audio>
<source src="data/music/track1.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause" src="data/play_button.png" onclick "changePlayPauseButton()">
</button>
<audio>
<source src="data/music/track2.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause_two" src="data/play_button.png" onclick "changePlayPauseButtonTwo()">
</button>
<audio>
<source src="data/music/track3.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause_three" src="data/play_button.png" onclick "changePlayPauseButtonThree()">
</button>
<script>
var play_pause = "pause_button.png";
function changePlayPauseButton() {
if (play_pause == "pause_button.png") {
document.images["play_pause"].src = "data/pause_button.png";
document.images["play_pause"].alt = "pause";
play_pause = "play_button.png";
} else {
document.images["play_pause"].src = "data/play_button.png";
document.images["play_pause"].alt = "play";
play_pause = "pause_button.png";
}
}
var play_pause_two = "pause_button.png";
function changePlayPauseButtonTwo() {
if (play_pause_two == "pause_button.png") {
document.images["play_pause_two"].src = "data/pause_button.png";
document.images["play_pause_two"].alt = "pause";
play_pause_two = "play_button.png";
} else {
document.images["play_pause_two"].src = "data/play_button.png";
document.images["play_pause_two"].alt = "play";
play_pause_two = "pause_button.png";
}
}
var play_pause_three = "pause_button.png";
function changePlayPauseButtonThree() {
if (play_pause_three == "pause_button.png") {
document.images["play_pause_three"].src = "data/pause_button.png";
document.images["play_pause_three"].alt = "pause";
play_pause_three = "play_button.png";
} else {
document.images["play_pause_three"].src = "data/play_button.png";
document.images["play_pause_three"].alt = "play";
play_pause_three = "pause_button.png";
}
}
</script>
I created a kind of playlist which appears only the button
play / pause . I also customized the button , so that the image automatically change when clicked . The problem is that I have several buttons !
What I like to do, is to change not only the image of the button itself when clicked but also the other button when it is in play mode ( pause image ) to be returned to the play mode (play image )
Go easy on me guys
I just started to code one month ago!
thanks
Well, I'm not sure if is that what you need but take a look the example:
http://jsfiddle.net/j6nbcpL9/
js:
$(document).ready(function(){
$('button').on('click', function(){
var option = $(this).attr('data-btn');
console.log(option);
if(option === 'changePlayPauseButtonThree'){
changePlayPauseButtonThree();
...
}
if(option === 'changePlayPauseButtonTwo'){
changePlayPauseButtonTwo();
...
}
if(option === 'changePlayPauseButton'){
changePlayPauseButton();
...
}
});
});
Also, let me know if is not what you need to implement it properly. The code is not the best but I hope it's help.

How use 2 audio players and stop one when other is playing

So i have one audio player in my page with two play buttons, and i need to stop and play the player works with this two buttons.
I'm using html5 and js/jquery for do this, but i can't finding a way to stop audio-player 1 when i start audio-player 2, someone can help?
My jsfiddle: http://jsfiddle.net/j08691/LqM9D/9/
My 2cents, it will detect with button is clicked, and change the other one's text back to "play"
window.player = $('#player')[0];
$('#playpause, #playpause2').click(function () {
if (player.paused) {
var second_playbutton = ($(this).attr("id") == "playpause")
? "playpause2"
: "playpause"
$("#" + second_playbutton).html("play");
player.play();
this.innerHTML = 'pause';
} else {
player.pause();
this.innerHTML = 'play';
}
})
you can just use one class name for each button and control them at one time
<button class="player-control" id="playpause">play</button>
<audio id="player">
<source src="http://96.47.236.72:8364/;" />
</audio>
<!-- here the other button that needs to start sound too -->
<button class="player-control" id="playpause2">play</button>
<script type="text/javascript">
window.player = $('#player')[0];
$('.player-control').click(function () {
if (player.paused) {
player.play();
$('.player-control').html('pause');
} else {
player.pause();
$('.player-control').html('play');
}
});
</script>

Categories