I have my audio element:
<audio class='mp3audio' src='file.mp3'></audio>
And I want to perform a function or an action when the play button is clicked in jQuery. I've found lots of things for creating your own custom controls, but nothing to fire when the play button is clicked. The closest I've found is this, but then I can't use useful things like $(this).
I really want something like this:
$('audio.mp3audio').click(function () {
alert("you clicked play");
});
But I can't find any documentation on it?
You can hook to the playing event, so you can run the code no matter how the audio element is controlled; either from the play control, or manually through code. Try this:
$('audio').on('playing', function() {
console.log('playback started!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto" controls></audio>
pass the this object in your function as
<audio class='mp3audio' src='file.mp3' onplay="myFunction(this)"></audio>
and receive it as
function myFunction(element){
console.log(element);
}
Take a look to this example
function playBeep() {
var sound = document.getElementById("Sound")
sound.play();
}
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton" onclick="playBeep()">
beep
</button>
</div>
You can do this in 3 ways:
In HTML:
<audio onplay="myScript">
In JavaScript:
var audio = document.getElementById("myAudio");
audio.onplay=function(){myScript};
In JavaScript, using the addEventListener() method:
var audio = document.getElementById("myAudio");
audio.addEventListener("play", myScript);
HTML
<audio class='myaudio' ></audio>
JQUERY
$('.myaudio').on('playing', function(){
//your code
});
Related
I'm using the toggle function to show and hide content, it works well, the only problem I have is that when I place a video the video continues to play even when it is hidden, is there any way to stop playing the video when it is hidden
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
<button>Toggle</button>
<p>the video is displayed here</p>
You can do:
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
if (document.getElementById('myVideo').paused)
document.getElementById('myVideo').play();
else
document.getElementById('myVideo').pause();
});
});
If video is paused, play it and if it is playing then pause it on the click.
I think you would want to check if your wrapping p element is visible, using $("p").is(":visible").
If it is visible, pause the video using document.getElementById("yourVideoId").pause(), obviously replacing "yourVideoId" with whatever you have in the id attribute on your <video> tag. Then, after you do that, you can call .toggle() on your p element.
If it is not visible, and the user clicks your toggle button, I would imagine you would just want to show the video, and not resume playing it, as that might be a little jarring to the user. If you do want that functionality, however, just add document.getElementById("video").play() in the else block in the example below.
Here is a working example to demonstrate the functionality:
$(document).ready(function() {
$("button").click(function() {
var p = $("p");
if (p.is(":visible")) {
document.getElementById("video").pause();
$(this).text("Show");
} else {
$(this).text("Hide");
}
p.toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<video id="video" controls width="40%">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</p>
<button>Hide</button>
Added width="40%" on the video so it fits in the snippet window.
OK I've read several answers here but they didn't help me at all (in fact, none of them is being accepted as answer)
Question is how to "Play a beep sound" on "button click"
I am trying to make a website that works on touchscreen device so I want every button click events will play a beep sound, that should be nicer for users who using the website. Beep sound file is here: http://www.soundjay.com/button/beep-07.wav . I only need this work on Google Chrome (supports HTML5)
I understand this need to work on client-side so I tried this:
Javascript:
<script>
function PlaySound(soundObj) {
var sound = document.getElementById(soundObj);
sound.Play();
}
</script>
HTML
<embed src="/beep.wav" autostart="false" type="audio/mpeg" loop="false" width="0" height="0" id="beep" enablejavascript="true" />
<asp:LinkButton ID="lbtnExit" runat="server" OnClick="lbtnExit_Click" OnClientClick="PlaySound('beep')" CssClass="btn btn-lg btn-danger" Text="Exit <i class='fa fa-sign-out' style='font-size: 40px'></i>"></asp:LinkButton>
But it doesn't work, nothing happens when I click the button.
You could use an audio tag like this:
<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autoplay="false" ></audio>
<a onclick="playSound();"> Play</a>
<script>
function playSound() {
var sound = document.getElementById("audio");
sound.play();
}
</script>
Here is a Plunker
Admitting you already have something like <div id='btn'>Click to play!</div> in your html, you could do it as simple as:
$('#btn').click( () => new Audio('mp3/audio.mp3').play() );
This is the best solution IMO because it allow to click multiple times quickly on the button without problem (which is not possible in other answers at the time) and is a one liner.
const audioUrl = 'https://freewavesamples.com/files/Ensoniq-ESQ-1-Piano-C3.wav'
$('.btn').click( () => new Audio(audioUrl).play() ); // that will do the trick !!
body {padding: 16px;}
.btn {
background: tomato;
padding:15px;
border-radius:5px;
color:#fff;
cursor: pointer;
box-shadow: 0 -3px rgba(0,0,0,0.15) inset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class='btn'>Click to play!</span>
Example on codepen
This works fine
function playSound () {
document.getElementById('play').play();
}
<audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio>
<button onclick="playSound()">Play</button>
Technically, the following doesn't answer the question about "playing" a beep, but if asking how to "generate" a beep, then consider the following code that I found on this website:
a=new AudioContext()
function beep(vol, freq, duration){
v=a.createOscillator()
u=a.createGain()
v.connect(u)
v.frequency.value=freq
v.type="square"
u.connect(a.destination)
u.gain.value=vol*0.01
v.start(a.currentTime)
v.stop(a.currentTime+duration*0.001)
}
Sample values for the call: beep(20, 100, 30). The aforementioned website includes more details and sound samples.
The sound can be in response to a button click or programmatically generated at will. I have used it in Chrome but have not tried it in other browsers.
With raw JavaScript, you can simply call:
new Audio('sound.wav').play()
Been driving me crazy, but with JQuery I found a solution... not really the best way to do it, but it worked properly for me...
function ding() {
$("body").append('<embed src="/ding.mp3" autostart=false autoplay=false type="audio/mpeg" loop="false" width="0" height="0" id="beep" enablejavascript="true" />');
setTimeout(function(){ $("#beep").remove(); },2000);
}
not sure how much of the embed tag is really required, but once it started working, I stopped writing (embed copied from another solution).
Hope this helps someone else (or helps me the next time I forget)
expanding on Alan M.'s answer, this will prevent console errors if unable to run due to no user event yet
var actx = false;
function beep(vol, freq, duration){
try{
if(!actx) actx = new AudioContext();
v=actx.createOscillator();
u=actx.createGain();
v.connect(u);
v.frequency.value=freq;
u.connect(actx.destination);
u.gain.value=vol*0.01;
v.start(actx.currentTime);
v.stop(actx.currentTime+duration*0.001);
}catch{
// ignore
}
}
This is my header:
I want to add sound affect twice:
on mouseover on a href from (innerlinks)
on click on href from (innerlinks)
I want a different sound onclick and onmouseover.
what is the best way?
thanks!
<div id="HoverHeader">
<div id="SiteHeader">
<div id="MainNav">
<div id="btnNav"><img src="../../../000Frames/site/images/menu-bt.png" alt="menu"/></div>
<uc1:mainNav ID="mainNav1" runat="server" />
<div id="InnerLinks">
תיק עבודות
לקוחותינו
אודותנו
צור קשר
</div>
</div>
</div>
</div>
You can add couple audio tags on page and play them as described in this article - Play Sound on :hover | CSS-Tricks.
<audio>
<source src="audio/beep.mp3"></source>
<source src="audio/beep.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
<script>
var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
audio.play();
});
</script>
That needs JavaScript and an audio tag. This is from http://css-tricks.com/play-sound-on-hover/
For hover sound:
<audio id="hover">
<source src="audio/hover.mp3"></source>
<source src="audio/hover.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var hover = $("#hover")[0];
$(".InnerLinks a").mouseenter(function() {
hover.play();
});
For click sound:
<audio id="click">
<source src="audio/click.mp3"></source>
<source src="audio/click.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var click = $("#click")[0];
$(".InnerLinks a").click(function() {
click.play();
});
Demos at CSS Tricks
I have decided to start a new project.
This project is a spell checker to help children and send the report on how well the child is performing to the teacher.
I have already set up where the teacher can place the word, and what I now need to do is that when the pupil clicks the button, the word gets read out loud.
Is there any plugin that I could use?
I'm not worried about how the pupil will access the word but how to make the word be read out.
Any language will be fine.
Thank you all for your time.
I guess the easiest thing would be to use html5 audio to play the according word from the webserver whenever it is clicked:
<html>
<body>
<script type="text/javascript">
window.onload = function main() {
var path = "/sndz"; //folder on the webserver for all your sound files
var Hello = document.getElementById("Hello");
Hello.onclick = readWrd(path + "Hello.mp3");
return false;
}
function readWrd(String audioSrc) {
var wrd = new Audio(audioSrc);
wrd.play();
}
</script>
<!--and later in make link or sth-->
<a id="Hello" href="#">Hello</a>
<!--leave the 'href' empty if you want the link to be destroyed after you click it-->
</body>
</html>
All you need to do is add the word at the end of the link below, and then you can style it as much as you want e.g. autoplay when you click a button.
<audio controls="controls">
<source src="http://translate.google.com/translate_tts?tl=en&q=wordgoeshere" type="audio/mpeg">
</audio>
So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S
I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});