I have a text and a image that I add an attribute to each onclick="playAudio()".
<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1>
<img onclick="playAudio()" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test">
I want to do the following. If I click text playing audio, else if I click image stop playing audio at text and playing audio at image.
How to make that?
HTML audio.
<audio id="myAudio">
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
And JS.
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
Here's an overly simplistic code for that:
var audio1 = document.getElementById("audio1"),
audio2 = document.getElementById("audio2"),
whoIsPlaying = null;
function clickOnH1() {
if (whoIsPlaying != 'H1') {
audio2.pause();
audio1.play();
whoIsPlaying = 'H1';
}
}
function clickOnIMG() {
if (whoIsPlaying != 'IMG') {
audio1.pause();
audio2.play();
whoIsPlaying = 'IMG';
}
}
clickOnH1 function should go into onclick attribute of H1 tag, and clickOnIMG function should go into onclick attribute of IMG tag.
Please find below snippet pass this as an argument so we can get tagName of clicked element and than put conditions accordingly..
var x = document.getElementById("myAudio");
function playAudio(e) {
if(e.tagName == "IMG")
{
alert('Stop') ;
}
if(e.tagName == "H1")
{
alert('Play') ;
}
}
<h1 class="underline-on-hover" onclick="playAudio(this)" onmouseover="" cursor: pointer;">Test.</h1>
<img onclick="playAudio(this)" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test" />
Multiple audio sources to tag doesn't work this way.
Something like this should work, if you only need to handle the image click right after text click.
var img = document.getElementById("img");
function playAudio() {
x = new Audio("sound.mp3");
x.play();
img.addEventListener('click',changeAudio(x));
}
function changeAudio(x){
return function(){
x.pause();
x.src = "sound2.mp3";
x.play();
}
}
<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1>
<img onmouseover="" style="cursor: pointer;" id="img"
class="img-responsive" src="imagetest.png" alt="Image Test">
Related
I am still newbie
I'm studying,
help if you can I don't understand, I want to add 2 3 songs to the site I wrote the code but only 1 song works
how to make all songs play
but not simultaneously, but in turn,
For example
I am listening to music 1 and then I want to listen to play 2, when I press play 2, play 1 should stop
how to do it i don't understand can you help in advance thanks
I'll leave the code
var mySong = document.getElementById("mySong");
var icon = document.getElementById("icon");
icon.onclick = function() {
if(mySong.paused){
mySong.play();
icon.src = "img/pause-icon.png";
}else{
mySong.pause();
icon.src = "img/play-icon.jpg";
}
}
<img src="img/play-icon.jpg" alt="" id="icon" width="80">
<audio id="mySong">
<source src="Ганвест - Кайфули.mp3" type="audio/mp3">
</audio>
<img src="img/play-icon.jpg" alt="" id="icon" width="80">
<audio id="mySong">
<source src="Ганвест - Кайфули.mp3" type="audio/mp3">
</audio>
You need unique IDs or delegate, then you do not need IDs at all:
Note I changed icon id to icon class, wrapped each song in a div and all songs in a div too
const icons = {
play: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png",
pause: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/play-pause.png"
}
const isPlaying = audioElement => !audioElement.paused;
const container = document.getElementById("songs");
const songs = container.querySelectorAll(".song audio");
const controls = container.querySelectorAll(".song .icon");
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.matches(".icon")) {
const mySong = tgt.closest(".song").querySelector("audio");
// pause all other songs
songs.forEach((song,i) => {
if (isPlaying(song) && song != mySong) {
song.pause()
controls[i].src=icons.play;
}
});
if (mySong.paused) {
mySong.play();
tgt.src = icons.pause;
} else {
mySong.pause();
tgt.src = icons.play;
}
}
})
<div id="songs">
<div class="song">
<img src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png" alt="Toggle" class="icon" width="80">
<audio id="mySong1">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3"></audio>
</div>
<div class="song">
<img src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png" alt="Toggle" class="icon" width="80">
<audio id="mySong2">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mp3"></audio>
</div>
</div>
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.
<audio id="audio1" src="a.wav"></audio>
<audio id="audio2" src="b.wav"></audio>
<img id="img1" src="a.png" alt="" onselect="select()" />
<img id="img2" src="a.png" alt="" onselect="select()" />
<input type="button" onclick="play()">
i have multiple images in my code a and every image has its respective audio what i want to do is i want to select the image and on clicking the button i want to play the audio against that particular image .all this i want to do using javascript and html . so can any one help me javascript part?
You can do something like this using data attributes: http://jsfiddle.net/bostdgvp/
JS:
var selectedImage;
function select(image) {
var images = document.querySelectorAll('img');
var index = 0, length = images.length;
for (; index < length; index++) {
images[index].classList.remove('selected');
}
selectedImage = image.id;
image.classList.add('selected');
}
function playAudio() {
if (!selectedImage) {
alert('no image selected')
}
var image = document.getElementById(selectedImage);
var audioId = image.getAttribute('data-audio')
var audioElement = document.getElementById(audioId);
audioElement.play();
}
HTML:
<audio id="audio1" src="#Url.Content(item.Letter_Record)"></audio>
<audio id="audio2" src="#Url.Content(item.Letter_Record)"></audio>
<img id="img1" data-audio="audio1" src="http://placehold.it/350x150" alt="" onclick="select(this)" />
<img id="img2" data-audio="audio2" src="http://placehold.it/200x100" alt="" onclick="select(this)" />
<input type="button" value="play" onclick="playAudio()">
CSS:
.selected {
border: 1px solid red;
}
Just add this and it should work:
<img id="img1" src="a.png" alt="" onclick="select(this.id)" />
<img id="img2" src="a.png" alt="" onclick="select(this.id)" />
<script>
function select(num){
var x = num.match('/\d+/');
var audio = document.getElementById("audio"+x);
audio.play();
}
</script>
Here is a jsfiddle that should put you in the right direction:
http://jsfiddle.net/knopch/31oasnee/
<img id="img1" src="a.png" alt="" onclick="select(this.id)" />
<img id="img2" src="a.png" alt="" onclick="select(this.id)" />
<script>
function select(id){
console.log(id);
//play(id);
}
</script>
This allows you to click the image, and its id will be printed in the console (option+cmd+j on chrome+mac).
So if you have the id of the object being clicked (or selected), the select() functions really just need to pass on this id to the function that handles playback. If you have an audio file mapped to each image, you can select the audio file for playback based on the image id.
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.
I've got several HTML5 audio elements on a page and am using jQuery to play and pause them. The play and pause functions work appropriately, but the tracks can all be played at the same time.
How can I rewrite this code so that only one song can be played at a time? That is.. if one is playing and you click on another, pause the previous and play the most recent click.
Thank you!
HTML:
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript: (that works, but plays/pauses individually)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
JavaScript: (ugly concept of mine)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
song.not($(this).pause();
else
song.pause();
});
});
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(curPlaying) { $("audio", "#"+curPlaying)[0].pause(); }
if(song.paused) { song.play(); } else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
That should work.
EDIT:
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;
});
});
This little function works for me. It stops all other audio elements playing on the page and lets the one that has been started keep playing. Here is a fiddle.
$("audio").on("play", function (me) {
jQuery('audio').each(function (i,e) {
if (e != me.currentTarget)
{
this.pause();
}
});
});