Music player plays all with the same id - javascript

Im trying to make a music player where, when the user click on the button, the overlayed image, will change the image to stop.png and play the song. When the user click it again it will change the image to play.png and stop playing song.
<audio id="myAudio">
<source src="http://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/jsref/hors.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
function plaYer() {
var image = document.getElementById('myImage');
var x = document.getElementById("myAudio");
if (image.src.match("play")) {
image.src = "stop.png";
x.play();
} else {
image.src = "play.png";
x.pause();
}
}
</script>
<button id="song"
style="color: white; background-image: url('cover100.jpg'); border: none; outline: none; display:block;
width:100px;
height:100px;">
<img id="myImage" onclick="plaYer()" src="play.png" width="100" height="100">
</button>
My problem is, when I try to create 2 music player the other music player doesnt work. Can someone help me ?

IDs have to be unique. If you want to reuse your function, you cannot hardcode the IDs in it. Since you use inline event handlers, you already have access to the image element. Pass that information, plus the ID of the corresponding <audio> element to your function:
function plaYer(image, audioID) {
var x = document.getElementById(audioID);
// rest of your code ...
}
// HTML
<img id="myImage" onclick="plaYer(this, 'myAudio')" ... />
I recommend to read the excellent articles on quirksmode.org to learn more about event handling.

Related

How to Play GIF on click audio play button

I want that whenever anyone plays the audio then only gif play..
here what I tried...
number = 0;
var animations = ['https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif'
];
function character() {
image = document.getElementById('1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG');
image.src = animations[number];
}
<div class="board">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhUIEQv7m_0HrLkcEDQURyV74eGEO8ZDW0LhhyFbK72BBXm9S0BolRB0V82i7RvX5S83j1QPOYazQlbUp8p9S5xSnlMNIpQGwJdKlmwCiPc8sHMqO8dPgYpstyejRK9rKeWNlofjOhTQGcfyk3Jt_1YqAezHYyRBDJiaGYD1R5O9mrdzaQKzDAc0Pe2oA=s16000" alt="cassete" width="300" height="200" id="1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG" onclick="character();"/>
<audio class="splplayer" controls="controls" id="audio_player" preload="metadata">
<source src="https://drive.google.com/uc?export=download&id=1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG"></source></audio></div>
Don't know where the error occurs.... here gif is playing on clicking on it not on clicking the audio play button

How to make video play only when a button is clicked in javascript

I have a div that inside of it has a <video autoplay> <source src='myvid'> </video> and by default the div has a display ='none' on css. I am adding an event listener of click on the div and once its clicked i am changing the display none to display block.
the problem is that the video plays automatically when the site reloads and not when the button is clicked. basically i want the video to play only when the div is display ='block'. How can i do that in Javascript?
Remove the autoplay attribute
Use JavaScript to play the video using a custom button and the .play() method
<video id="video"> <source src='myvid'></video>
<button id="play">PLAY</button>
document.querySelector("#play").addEventListener("click", () => {
document.querySelector("#video").play();
});
If you don't want a custom button (not clear from your question) than you could provide the browser default by using the controls attribute
const EL_video = document.querySelector("#video");
const EL_play = document.querySelector("#play");
EL_play.addEventListener("click", () => {
const isPaused = EL_video.paused;
EL_video[isPaused ? "play" : "pause"]();
EL_video.classList.toggle("u-none", !isPaused);
});
#video {width: 300px;}
/* Utility classes: */
.u-none {display: none;}
<button id="play">Toggle & play</button><br>
<video id="video" class="u-none">
<source src='http://vjs.zencdn.net/v/oceans.mp4' type='video/mp4'>
</video>
try addind an onclick attribute to the div like this:
<div onclick="play_video();">
Or you can create a button:
<button onclick="play_video();">play the video</button>
Then, create the javascript function like this:
function play_video()
{
document.getElementById("id_of_the_video").play();
}

add class not working with html5 video player using jquery

I have a simple video block, on video ended I am displaying certain gif,
Problem:
Now when a user pauses the video the gif also shows up, meaning When the video has ended the gifs shows up now when I play again the video and pause the video the gifs show again
To do
I want when a user pauses the video the gif should not display, meaning the gif should show up only on video ended
Here is my solution
HTML
<div canplay id="video-block">
<div id="video-container">
<video id="videoplayer" playsinline muted autoplay>
<source src="videos/good_job.mp4"></source>
</video>
<div id="interactive-layers">
</div>
</div>
<div id="pause-play-button">
<img id="play" src="images/play.png">
<img id="pause" src="images/pause.png">
</div>
Js
$(document).ready(function(){
$("#videoplayer")[0].addEventListener("ended", onVideoEnded);
});
function showGif(gifname) {
$("#gif-data").remove();
var gif = $("<div id='gif-data'><audio class='audio' id='gifaudio' autoplay src='" + gifs[gifname].audio + "'></audio><img class='gif' id='animatedgif' src='" + gifs[gifname].gif + "?rand=" + Math.random() + "'></div>")
$("#interactive-layers").append(gif);
}
function onVideoEnded(e) {
showGif("ed22");
}
$("#pause-play-button").on("click", function () {
clearTheTimeout();
if ($("#video-block video")[0].paused == true) {
$("#gif-data").addClass("hidegif");
$("#video-block video")[0].play();
$("#pause").css("display", 'block');
$("#play").css("display", "none");
} else {
$("#video-block video")[0].pause();
$("#audioplayer")[0].pause();
$("#gif-data").removeClass("hidegif");
$("#pause").css("display", 'none');
$("#play").css("display", "block");
}
});
CSS
.hidegif{
display: none;
}
Unfortunately, still, my giffs shows up when I click pause video button,
What am I doing wrong?
I think the problem happens because element 'gif-data' created dynamically. Try to find an element inside the parent static element.
$('#video-block').find("#gif-data").addClass("hidegif");
That should work.
It's a few months old post but in my experience addEventListener not works all the time with Jquery but the .on event works. so when you are listening the ended event, do it with .on and write the showGif function inside it.

Javascript/html audio problems

I'm having some problems in my code. To begin, I would like for a song to play after a song I am playing ends (with the audio tag).
<audio id="batmansong1">
<source src="Songs/nanananabatman.m4a">
</audio>
<button id="play" onclick="document.getElementById('batmansong1').play()"><img src="Buttons/play.jpg" height="40" width="40"></button>
<button id="pause" onclick="document.getElementById('batmansong1').pause()"><img src="Buttons/pause.jpg" height="40" width="40"></button>
As you can see, the buttons will play or pause the first audio clip. However, I want them to also pause and play the second audio clip when it starts playing.
Your buttons will still be working when doing this. You can add an eventlistener that checks if te <audio> element ended playing. Then you just set the next source and start playing again. (BTW you'd better not use inline javacript and old html styling (I mean width="40" and such, just use CSS))
all the code below is in this jsfiddle
JS:
player = document.getElementById('batmansong1');
player.addEventListener('ended', function () {
if (player.src == 'link/to/your/next/file.m4a') return; //check if we have already set the new src, as this function is called EVERY TIME your audio file ends.
player.src = 'link/to/your/next/file.m4a';
player.play();
});
document.getElementById('pause').addEventListener('click', function () {
document.getElementById('batmansong1').pause();
});
document.getElementById('play').addEventListener('click', function () {
document.getElementById('batmansong1').play();
});
HTML:
<audio id="batmansong1" src="Songs/nanananabatman.m4a"></audio>
<button id="play">
<img src="Buttons/play.jpg" />
</button>
<button id="pause">
<img src="Buttons/pause.jpg" />
</button>
CSS:
img {
width:40px;
height:40px;
}
If you want to know anything else, feel free to ask!
//It should work for html 5 surpport browsers
function htmlfiveMedia(){
document.getElementById('player').play();
}
//in your html
<audio id="player" src="../jizadmin/sounds/new_message.wav"></audio>
OR
IF THE BROWSER DOES NOT SUPPORT AUDIO TAG TRY THIS BELOW
//This function is going to play sound
function explorerMedia()
{
$('embed').remove();
$("<embed src='../jizadmin/sounds/new_message.wav' autostart='true' hidden='true' height='1' width='1'>").insertAfter('hr');
}
//add an <hr> below your page
Hope this would help

Need to mute audio and change image with JS

I am trying to create a toggle switch for the audio that replaces the icon dependent on the state. Here is my code (that is not working):
<div id="bgAudioControls">
<a href="#" onclick="muteSound()">
<img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
</a>
<audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<script language="javascript">
function muteSound() {
if (document.getElementById("mute").src == "img/sound-off.svg")
{
document.getElementById("unmute").src = "img/sound-on.svg";
document.getElementById('bgAudio').muted = true;
}
else
{
document.getElementById("mute").src = "img/sound-off.svg";
document.getElementById('bgAudio').muted = false;
}
}
</script>
I am positive I am overlooking something SUPER simple.. Any help appreciated.
A live view of the whole code in action can be seen at http://arc.adamroper.com
The below code works - albeit as two buttons, not a toggle.
Mute
Unmute
UPDATE : working FIDDLE
What says #Stasik is :
You have to remove id="mute" from the <a> tag and put it in the <img> tag
Like this:
<img id="mute" src="img/sound-off.svg" />
UPDATE
to play/pause try this found here
COMPLETE CODE
HTML
<div id="bgAudioControls">
<a href="#" >
<img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
</a>
<audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
JAVASCRIPT
$(function() {
$("#mute").click(function(e) {
e.preventDefault();
var song = $('audio')[0]
if (song.paused){
song.play();
document.getElementById("mute").src = "img/sound-on.svg";
}else{
song.pause();
document.getElementById("mute").src = "img/sound-off.svg";
}
});
});
Accessing ".src" of the mute element is not correct, since src is the attribute of the child of the mute element. Assign id="mute" to the element directly for a quick fix.

Categories

Resources