Create a function javascript/jquery that detects clicks on canvas - javascript

I need to make a function where if I click on a particular image on my site, it'll play a specific audio file that's associated with that picture ONLY. I have some code, but I can't seem to get the function part correct. I want so that everytime you click the image, it'll play the specific audio and when you click it again, it'll pause. I have lots of images on my site. Thank you so much!
Edit: the website wouldn't let my post a screenshot of the code since I'm a new member,
[fiddle. net link][2]
[2]: http:// jsfiddle.net/c8KTg/

You should revise your audio markup:
<audio controls="controls" id="clips">
<source src="1.mp3" />
<source src="2.mp3" />
</audio>
Then something like this would probably do it:
$('.images').each(function(index, element) {
$(this).click(function(e) {
var id = this.attr('id');
var sound_id = id.split('image')[1];
var music = $('#clips').get(sound_id);
music.play();
});
});

Related

Trigger Sound before going to new page

I have this proyect to deliver to my school where I need to make a page, I was thinking of making a portfolio similar to a game but I want the person to click a a custom button a made and before it redirects it to the new page, it can make a custom sound for it.
<header headerIndex>
<audio id="selectaudio" preload="auto">
<source src="./audio/selectsound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Lets Begin!
</header>
So this is my code here, nothing special at all. How can I make it do the audio sound before moving onto the new page called "welcome.html".
If there is any javascript needed, I can add it as I will try to understand what it does haha. Thank you!
I think you need a little time for the sound to be played before you redirect to another page.
This is how I would do it (Jquery needed):
<a onClick="return makeSound('www.example.cmo');" href="#">Click on me!</div>
And JS
function makeSound(url) {
event.preventDefault();
var audio = new Audio('https://freetestdata.com/wp-content/uploads/2021/09/Free_Test_Data_500KB_WAV.wav');
audio.play();
setTimeout(function() {
window.location.href = url;
}, 1000);
}
https://codepen.io/yortem/pen/gOzbYLb
let audio = document.getElementById("selectAudio");
function bell() {
audio.play();
}
let playAudio = document.getElementById("playAudio").onclick = bell();
I think this should help, I am also new with JavaScript

Plyr audio player muted for the first second of audio

I am using Plyr audio player for my Rails app, along with Simulus.js.
I dynamically add audio source when the user clicks on different audio buttons. Then I launch the audio player with the .play() method.
However, the beginning of the track can't be heard. You can try it out on this URL, by taping the first audio player. If you put back the audio cursor to the beginning, then you can hear the very beginning of the track.
Here is my HTML:
<audio class="player" controls data-dicteeModule-target="player">
<source class="player-source" src="<%= dictee_modules.first.audio_url %>" type="audio/mp3" />
</audio>
Here is how I initialize the player:
initialize() {
const players = document.getElementsByClassName('player');
var player = [];
Array.from(players).forEach(function (ele, i) {
player[i] = new Plyr(ele, {
controls: ['progress']
});
});
}
Here is my Stimulus onclick action:
var player = this.playerTarget;
var source = audio.getAttribute("data-audio-source");
var audioSource = player.getElementsByClassName("player-source")[0];
audioSource.src = source;
player.load();
player.addEventListener('canplay', (event) => {
player.play();
});
Any idea why the very beginning of the track is not heard?
Thanks.
This happens to me too on various websites that need to use audio after no audio was used for a while, even on YouTube. I'm using Chrome 104.0.5112.81 on Windows 10.
It's likely a driver issue you can't do much about (assuming YouTube would fix it if they could). It looks like Windows or Chrome ends up dimming the sound way too quickly, and takes too long turning it back on.
Unfortunately I couldn't find anything on Google yet. It seems hard to make Google understand this query, it only returned results about audio preventing PC sleep mode (or other unrelated common issues), no matter how I phrased it. Could also indicate it's just a very obscure issue with one or a few particular drivers.

HTML5 video source changing

I have a video tag like this. All this videos have to play dynamically one after other
I tried writing some javascript functions in eventlistner "progress" of the video, but not working.How to play these videos automatically?anybody please suggest any codes in javascript or jquery
<div id="divVid">
<video id="video1" width="320" height="240" autoplay >
<source src="vid_future technology_n.mp4#t=20,50" >
Your browser does not support the video tag.
</video>
</div>
JS Code (Updated from comment section)
document.getElementById("video1")
.addEventListener("progress",
function () {
var i = 0;
var vid = document.getElementById("video1");
if (vid.paused) {
if (vid.currentSrc == myvids[i]) {
vid.currentSrc = myvids[i + 1]; } i = i + 1;
}
});
The set of <source> elements provide alternative formats for the video for different devices, not a playlist.
If you want to have a playlist, then listen for an ended event and change the src with JavaScript.
In response to edits to the question:
No, really change the src. You are trying to change the currentSource which is defined as being readonly
I said ended. Don't touch progress, you what to play the next video when the last one is finished, not when a tiny chunk of it has played
The list of <source> elements still isn't a playlist. Don't try to use them as such. Keep the list of videos somewhere else (e.g. a JS array).

Audio on Chrome for mobile isn't working using Jquery

I tried to play some sound (wav, ogg) using HTML5 with JavaScript on Chrome for mobile, but it's not working. I even tried a "fake" click, but nothing happened.
$(document).on("click", "#audio", function(){
var a = $('#audio');
if(a.length !== 0){
a.get(0).play();
}
});
$('#audio').click();
or
var audio = new Audio("file.ogg");
audio.play();
HTML
<audio controls="controls" id="audio" class="hidden">
<source src="file.wav"></source>
</audio>
Thank you.
I'd try something like this:
$('some-button').on('click', function(){
$('audio')[0].play();
});
In other words - use a button to receive the click and then find the audio element and make it start playing.
There is a small, somewhat specialized example here:
http://jsbin.com/arecoq/84
Note that the music is licensed under Creative Commons BY-CC-SA, see further info here.

Changing video on mouseclick?

I have two videos, and I want to loop the first video until the user clicks the mouse, at which point I want to switch to playing the second video. Does anyone know what the best way to do this would be?
Edit: Sorry, to clarify, I would prefer to use HTML 5 (assuming this is possible). I am trying to have the two videos swapped out seamlessly, one on top of another. I want it to look like clicking the mouse made the video finish or progress. So I need to pause/hide the first one and show/play the second one.
Update: With Galen's help and some Google searches, I figured it out:
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function swapVideos() {
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
video1.style.display = 'none';
var video2 = document.getElementsByTagName('video')[1];
video2.play();
}
</script>
<body>
<video src="video1.ogg" controls="controls" loop="loop" autoplay="autoplay" onclick="swapVideos();">
your browser does not support the video tag
</video>
<video src="video2.ogg" controls="controls" preload="preload">
your browser does not support the video tag
</video>
</body>
</html>
Add this code to the click event of whatever you want
// pause first video
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
// play second video
var video2 = document.getElementsByTagName('video')[1];
video2.play();
Add this to make the first video loop
var video1 = document.getElementsByTagName('video')[0];
video1.addEventListener('ended', function () {
video1.play();
});
it's tough to be specific with the information you have given, but you could use javascript or jquery to do this. Bind a click event to a DOM element, and on click change the source of the video. I am assuming that the video is determined by a source parameter in an swf.

Categories

Resources