I want to know how to stop an audio that is set to "autoplay" using the X key on the keyboard. I have tried in a couple of method but it doesn't work.
That's my code:
JavaScript:
var source = "audio/homepage_benvenuto.mp3";
var audio = document.createElement("audio");
audio.autoplay = true;
audio.load()
audio.addEventListener("load", function()
{
audio.play();
}, true);
audio.src = source;
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e)
{
if (e.keyCode == "88") // 88 = X: interrompe audio in corso
{
player.pause();
player.currentTime = 0;
document.getElementById('audioA').pause();
}
}
Related
I have multiple HTML audio on my page, and want to apply this custom audio player to them. The thing is, this only works for the first audio, and not for the second, third and fourth. Is there any way where I can solve this problem?
My JavaScript code:
const audio = document.getElementById('audio');
const playPauseButton = document.querySelector('.play-button');
const progressBar = document.querySelector('.progress-bar');
const progress = document.querySelector('.progress-controls');
const playButton = document.querySelector('.playing');
const pauseButton = document.querySelector('.paused');
const playPause = () => {
if(audio.paused){
audio.play()
playButton.style.display = 'none';
pauseButton.style.display = '';
}
else{
audio.pause()
playButton.style.display = '';
pauseButton.style.display = 'none';
}
}
function pause(){
pauseButton.style.display = 'none'
}
window.addEventListener('load', pause);
playPauseButton.addEventListener('click', playPause);
audio.addEventListener('timeupdate', function(){
var progress = audio.currentTime / audio.duration;
progressBar.style.width = progress * 100 + "%";
});
document.addEventListener('keyup', (event) => {
if (event.code === 'Space') {
playPause();
}
if (event.code === 'KeyP') {
playPause();
}
});
I'm trying to make a simple audio player but it's just not working fine!
Here's the JavaScript:
var audio = document.getElementById("audio");
var isPlaying = false;
function togglePlay(element) {
element.classList.toggle("playing");
if (isPlaying) {
document.getElementById("audio").pause();
document.getElementById("audio").currentTime = 0;
} else {
document.getElementById("audio").play();
}
}
document.getElementById("audio").onplaying = function() {
var isPlaying = true;
};
document.getElementById("audio").onpause = function() {
var isPlaying = false;
};
Please help me!
var audio = document.getElementById("audio");
// use .paused instead
// var isPlaying = false;
function togglePlay(element) {
var promise;
if (!audio.paused) { /* isPlaying */
audio.pause();
audio.currentTime = 0;
element.classList.remove("playing");
} else {
// play is not instant, it returns a promise
promise = audio.play();
if (promise.then !== undefined) {
promise.then(function () {
element.classList.add("playing");
});
} else { /* old API */
element.classList.add("playing");
}
}
}
audio.onplaying = function() {
;
};
audio.onpause = function() {
;
};
Make sure to put the <script> at the end of the <body>
<script>/* put script at the end of body */</script>
</body>
</html>
Make sure the audio source for <audio> is an actual audio file. (not an html file containing audio) Open console and look at network requests.
im just a beginner in javascript and im stuck at a problem.
when i click play with function play()
it shows if its <= 2.5 but not when its > 2.5 .(I displayed the 'reddot' in html as display hidden).
function play() {
var audio = document.getElementById("audio");
audio.play();
if (audio.currentTime <= 2.5) {
document.getElementById('reddot').style.display = 'block';
}
if (audio.currentTime > 2.5) {
document.getElementById('reddot').style.display = 'none';
document.getElementById('reddot2').style.display = 'block';
}
}
function () {
}
function pause(){
var audio = document.getElementById("audio");
audio.pause();
}
function load(){
var audio = document.getElementById("audio");
audio.pause();
audio.currentTime = 0;
}
function rewind() {
var audio = document.getElementById("audio");
audio.play();
audio.currentTime = (audio.currentTime-6);
}
I'm making my own player with drumpad and i need help to assign functions to keyboard keys. I've got playlist with (now) 3 sounds:
var playlist = [
{
artist: "Snare",
title: "Snare",
source: "Snare.wav"
},
{
artist: "Kick",
title: "Kick",
source: "Kick.wav"
},
{
artist: "Clap",
title: "Clap",
source: "Clap.wav"
},
];
I've got some functions which i'm running by buttons:
var currentSong = 0;
var play = function() {
var audio = document.getElementById("audio1");
audio.play();
}
var pause = function() {
var audio = document.getElementById("audio1");
audio.pause();
}
var jeden = function() {
var audio = document.getElementById("audio1");
currentSong = 0;
audio.src = playlist[currentSong].source;
}
var dwa = function() {
var audio = document.getElementById("audio1");
currentSong = 1;
audio.src = playlist[currentSong].source;
}
var trzy = function() {
var audio = document.getElementById("audio1");
currentSong = 2;
audio.src = playlist[currentSong].source;
}
And the html:
<body>
<audio autoplay="autoplay" ontimeupdate="showinfo()" id="audio1"
controls="controls"></audio>
<br/>
<button onclick="jeden()">1</button>
<button onclick="dwa()">2</button>
<button onclick="trzy()">3</button>
</body>
I think the essiest way is to assign buttons to keyboard keys. Anybody can help me?
dzień dobry
The code will be something like this. You can change keypress() to keyup() or keydown() if suitable - check the documentation of those functions to appreciate the differences.
$('body').keypress(function( event ) {
if ( event.which == 49 ) {
jeden();
}
});
I referred to this page to determine the number 49 means key 1:
https://css-tricks.com/snippets/javascript/javascript-keycodes/
I should mention this is a jQuery solution and you will need to learn some basic jQuery setup. It is a popular approach to solving this problem. You will also be able to use jQuery to do your existing stuff a much nicer way.
Here is an example. https://jsfiddle.net/7j0krzx5/
use this
$(document ).on( "keydown", function(event) {
if (event.which === 80) // P key
{
event.preventDefault();
// do something e.g
}
else if (event.which === 78) // N key
{
event.preventDefault();
// do something
}
// console.log(event.which);
});
JSFiddle example
If you don't want to use jquery
var play = function() {
alert("Play");
}
var next = function() {
alert("Next");
}
function keyDownListener(event){
var keyCode = ('which' in event) ? event.which : event.keyCode;
if(keyCode === 80){ // P key
event.preventDefault();
play()
}
else if (keyCode == 78 ) { // N key
event.preventDefault();
next();
}
}
document.addEventListener("keydown", keyDownListener, false);
JSFiddle example
I have a HTML game that has left and right buttons when the user plays on a mobile. It all was working fine until iOS8 came out. Now the buttons seem really unresponsive. I have been using touchstart and touch end to detect when a user is holding down a button:
document.body.addEventListener('touchstart', function (e) { e.preventDefault(); });
btnLeft.addEventListener('touchstart', function (e) {
dir = "left";
player.isKeyDown = true;
player.isMovingLeft = true;
}, false);
btnLeft.addEventListener('touchend', function (e) {
player.isKeyDown = false;
player.isMovingLeft = false;
}, false);
btnRight.addEventListener('touchstart', function (e) {
player.isKeyDown = true;
player.isMovingRight = true;
dir = "right";
}, false);
btnRight.addEventListener('touchend', function (e) {
player.isKeyDown = false;
player.isMovingRight = false;
}, false);