The issue is simple: on jsfiddle work perfectly, not on altervista.
const box = document.querySelector('.box');
var audio = document.getElementById('audio');
box.addEventListener('click', e => {
e.target.classList.toggle('pause');
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});
to try it: https://jsfiddle.net/rezt5und/2/
Related
Hi this my simple project
window.addEventListener("load", () => {
loadIndexedDB(1, callBackData);
loadNotesIndexedDB(callBackNotes);
});
let playSound = () => {
const audio = new Audio();
audio.src = "./audio/audio.wav";
audio.play();
audio.load();
};
let callBackNotes = (note) => {
const notes = [];
notes.push(note);
notes.forEach((el) => {
$(".note_empty").addClass("note_activ");
let dateForDateTimeLocal = dateFormat();
let alarmColor;
if (el.alarm != null && dateForDateTimeLocal < el.alarm) {
alarmColor = "#fff";
} else if (el.alarm != null && dateForDateTimeLocal >= el.alarm) {
alarmColor = "#ff1c1c";
playSound();
} else {
alarmColor = "#fff";
}
$(".add_note_container").append(
appendHtml(
el.noteBackColor,
el.noteTextColor,
el.note,
el.projectType,
el.time,
el.id,
el.alarm,
alarmColor
)
);
});
};
My project localhost start audio play working but refresh window or reload not working audio.play I am dont understand what the problem Please help me Thanks
What is the right way to set it up?
Like this?
https://jsitor.com/E8JILS8mzZ
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.pauseVideo();
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
shufflePlaylist(player);
}
or should it be written like this?
https://jsitor.com/HjrwEdaVqe
let hasShuffled = false;
function onPlayerStateChange(event) {
player = event.target;
const shufflePlaylist = true;
if (!hasShuffled) {
player.setShuffle(shufflePlaylist);
player.playVideoAt(0);
hasShuffled = true;
}
}
or is there a more proper way for the code to be written?
YouTube Documentation:
https://developers.google.com/youtube/iframe_api_reference?hl=en
I have a problem with playing audio when I press or click a button.
Drum Machine
It seems like my audio has a delay but I put a audio.currentTime = 0, so I don't know what's going on.
Here is my JS:
const $ = document.querySelectorAll.bind(document);
const sounds = [
{id:'Bass Drum', letter:'Q', src:'https://dight310.byu.edu/media/audio/FreeLoops.com/3/3/Free%20Kick%20Sample%2011-909-Free-Loops.com.mp3'}
];
let volumeVal = 0.5;
$('input[type=range]')[0].addEventListener('input', function(e) {
volumeVal = e.target.value / 100;
});
function main(url, name) {
const audio = new Audio(url);
audio.currentTime = 0;
audio.preload = "auto";
audio.volume = parseFloat(volumeVal);
audio.play();
$('.name')[0].textContent = name;
}
window.onkeydown = function(e) {
function seter(id) {
setTimeout(() => {
$(`.${id}-but`)[0].classList.add('pressed');
setTimeout(() => {
$(`.${id}-but`)[0].classList.remove('pressed');
}, 140);
}, 0);
}
switch(e.key) {
case 'q':
main(sounds[0].src, sounds[0].id);
seter('q');
break;
}
}
$('.q-but')[0].addEventListener('click', () => {
main(sounds[0].src, sounds[0].id);
});
First off, big thanks to #Seblor for providing me with the solution.
I solved my problem by creating audio node for each sound:
<audio id="bass" preload="auto" src="https://dight310.byu.edu/media/audio/FreeLoops.com/3/3/Free%20Kick%20Sample%2011-909-Free-Loops.com.mp3"></audio>
And inside my JS file I added this event listener for every button:
$('.q-but')[0].addEventListener('click', () => {
const audio = $("#bass")[0];
audio.currentTime = 0;
audio.play();
});
Of course, now I could make my code less repetitive because I am doing this for all 9 buttons. And eventually I will.
I want you to play it as many times as I click on it.
(1 sec long audio only.)
function a() {
var elem = document.getElementById('musicplay');
var audio = document.getElementById('music');
var playing = false;
elem.addEventListener('click', function () {
if (playing) {
audio.play();
} else {
audio.play();
}
playing = !playing;
});
}
function playMusic() {
let playBtn= document.getElementById('musicplay');
let audio = document.getElementById('music');
let playing = false;
playBtn.addEventListener('click', ()=> {
if (playing) {
audio.pause();
playing = !playing;
} else {
audio.play();
playing = !playing;
}
});
}
If the value is an incorrect stream link, the 'Play' button still changes to 'Pause.'
This is what I was trying to prevent from happening.
Pressing 'Set' should not cause the Play button to change from 'Play' to 'Pause' if the audio is not working.
Code:
https://jsfiddle.net/vhgL96se/124/
Image
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
const input = document.getElementById("clear");
let canPlay = false;
function playPauseIcon(play) {
if (!canPlay) {
return;
}
if (play) {
button.classList.add("is-playing");
} else {
button.classList.remove("is-playing");
}
}
button.addEventListener("click", function () {
if (!canPlay) {
return;
}
if (player.paused) {
player.play();
playPauseIcon(true);
} else {
player.pause();
playPauseIcon(false);
}
});
button.addEventListener("mousedown", function (evt) {
if (evt.detail > 1) {
evt.preventDefault();
}
}, false);
sent.addEventListener("click", function () {
player.src = value.value;
player.volume = 1.0;
playPauseIcon(true);
});
input.addEventListener("click", function () {
value.value = "";
button.classList.remove("is-playing");
player.pause();
canPlay = false;
}, false);
player.onloadstart = function () {
if (value.value !== "") {
canPlay = true;
playPauseIcon(true);
}
};
}());
It should be changed to oncanplay instead, and then it works as it should.
Play button changes from Play to Pause
http://hi5.1980s.fm/;
Play button does not change from Play to Pause
when the stream is not valid.
h://hi5.1980s.fm/;
https://jsfiddle.net/vhgL96se/132/
player.oncanplay = function () {
if (value.value !== "") {
canPlay = true;
playPauseIcon(true);
}
};