Controlling the audio using the following code isn't working. If i click button which onclick calls playpause() it pauses the audio. But on again clicking it isn't resuming.
var audio=new Audio("music.mp3");
function music() {
audio.play();
audio.loop="true";
}
function playpause() {
if(audio.play)
{
audio.pause();
}
else if(audio.pause)
{
audio.play();
}
}
However if i use following, It is enabling pause and play using the same button
var audio=new Audio("music.mp3");
function music() {
audio.play();
audio.loop="true";
}
var count=0;
function playpause() {
if(count%2==0)
{
audio.pause();
}
else
{
audio.play();
}
count++;
}
What's wrong with the 1st one?
The HTML5 audio tag doesn't provide a 'play' property like you are trying to use in your code but it does provide a 'paused' property which by calling it returns the opposite Boolean. You would need to use it to query the state of the audio element.
Like this:
If(audio.paused) {
audio.play();
}
else {
audio.pause();
}
Related
i am building an app with ionic, i want to run a function whenever a video starts to play,like hide a button and etc. here's my code
let video = <HTMLVideoElement> document.getElementById(i)
if(video.paused) {
video.play()
video.oncanplay=()=>console.log('Starts playing');
}
The code is not working, please how can i run a function whenever any video on that page starts playing
var vid = document.getElementById("myVideo");
vid.onplay = function() {
alert("The video has started to play");
};
From here: https://www.w3schools.com/tags/av_event_play.asp
Try this, play returns a promise.
const video = document.getElementById("myVideo");
async function playVideo() {
try {
await video.play();
// video is playing, do your stuff here
} catch(err) {
// video is not playing
}
}
if(video.paused) {
playVideo()
}
For more info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">
You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}
Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});
Hello I'm trying to create a play and pause button for a little web application I'm creating. I've already made a button that plays and another button that pauses but but now I need a button that'll run the play function when clicked and go back to the pause button when clicked.
var audio = new Audio("audio.mp3");
$(".play").click(function () {
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).toggleClass(".play");
});
And here's the buttons
<div class="play"><img src="../images/play.gif"></img></div>
<div class="pause"><img src="../images/pause.gif"></img></div>
I know there could be and easy way to make a div change classes every time its clicked.
I would set up the <html> like this:
<div id="play"><img src="../images/play.gif"></img></div>
<!-- initially a play button -->
Then I would just use a boolean to switch back and forth in the script.
var toggleIt = false;
$("#play").click(function(){
if (!toggleIt){
audio.play();
toggleIt = true;
$("#play").find("img").attr("src", "file url here");
}
else{
audio.pause();
toggleIt = false;
$("#play").find("img").attr("src", "file url here");
}
})
edit: and here is a fiddle using wonderful place holder kittens. Yes, you should be grateful for my exquisite taste in placeholder pictures.
var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});
this is the simplest way. it would probably be better to do it with css psuedo classes, but i leave this pleasure to you if you care enough
You can create 2 diferents button and change de visibility
var audio = new Audio("audio.mp3");
$("#play").click(function () {
audio.play();
$("#play").hide();
$("#pause").show();
})
$("#pause").click(function () {
$("#pause").hide();
$("#play").show();
});
Set a variable then use a conditional to see if you should either play or pause the audio:
<div class="button"><img src="../images/play.gif"></img></div>
var play = true;
$(".button").click(function(){
if (play){
// Play
audio.play();
$(".button img").attr("src", "../images/pause.gif");
play = false;
} else {
// Pause
audio.pause();
$(".button img").attr("src", "../images/play.gif");
play = true;
}
});
Example
var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});
I'm looking to restart an audio file in a HTML5 audio player. I have defined a audio file and a play button.
<audio id="audio1" src="01.wav"></audio>
<button onClick="play()">Play</button>
When I click the play button the audio file starts playing, but when I click the button again the audio file doesn't stop and will not play again until it reaches the end of the file.
function play() {
document.getElementById('audio1').play();
}
Is there a method that would allow me to restart the audio file when I click the button using onclick rather than waiting for the song to stop?
To just restart the song, you'd do:
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.currentTime = 0
}
}
FIDDLE
To toggle it, as in the audio stops when clicking again, and when click another time it restarts from the beginning, you'd do something more like :
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.pause();
audio.currentTime = 0
}
}
FIDDLE
soundManager.setup({
preferFlash: false,
//, url: "swf/"
onready: function () {
soundManager.createSound({
url: [
"http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3", "http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg"
],
id: "music"
});
soundManager.createSound({
url: [
"http://www.w3schools.com/html/horse.mp3",
],
id: "horse"
});
soundManager.play("music");
}
}).beginDelayedInit();
And to start horse and pause all other sounds currently playing in a click event:
$("#horse").click(function () {
soundManager.stopAll();
soundManager.play("horse");
});
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
//this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function () {
this.sound.play();
}
this.stop = function () {
this.sound.pause();
this.sound.currentTime = 0
}
}
you can use the /above function to play sound
let mysound1 = new sound('xyz.mp3')
mysound1.play()
I have a play/pause button for a video player im making. Once the video has gone trough one play through, I'd like the play button to have the video start again, but it doesn't.
Here's the script im using:
function play(){
if(!media.paused && !media.ended){
media.pause();
playButton.innerHTML='Play';
window.clearInterval(updateBar);
}else{
media.play();
playButton.innerHTML='Pause';
updateBar=setInterval(update, 100)
}
}
How about structuring your function like this
function play(){
if (!media.paused) { // if currently playing (or ended?)
if (media.ended) { // if at the end
media.currentTime = 0; // go to start
} else { // else
media.pause(); // pause
playButton.innerHTML='Play';
window.clearInterval(updateBar);
return; // and end function here
}
} // then if function didn't end
media.play(); // resume playing
playButton.innerHTML='Pause';
updateBar=setInterval(update, 100);
}
The DOM Interface you're using is HTMLMediaElement.