How can I write this audio playing code nicer? - javascript

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;
}
});
}

Related

How should shufflePlaylist work in the javascript?

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

Why this JS code doesn't work on altervista?

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/

Only change from Play to Pause if the audio link is working

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);
}
};

Shuffle song when it ends - javascript html5

I have this code that randomizes and play a song from a list of them:
var sounds = [
"sounds/royksopp.mp3",
"sounds/9thwonder.mp3",
"sounds/thisbeat.mp3",
"sounds/mosdef.mp3",
"sounds/bewater.mp3",
"sounds/boutdre.mp3",
"sounds/masterflash.mp3",
"sounds/2ep.mp3",
"sounds/drewestcoast.mp3",
"sounds/poetry.mp3",
"sounds/mfdoom.mp3",
"sounds/dreams.mp3",
"sounds/oizo.mp3", ];
function StartOrStop(audioFile) {
srcAudio = sounds[Math.floor(Math.random() * sounds.length)];
var audie = document.getElementById("myAudio");
audie.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
if (audie.paused == false) {
audie.pause();
} else {
audie.src = srcAudio;
audie.play();
}
}
When the song stops playing, it restarts with th same one. How can I make it so when the music ends, it will grab a new song from my list and automatically play it?
The problem is that you are simply calling this.play() in your ended event listener. Instead, you should be updating the src attribute with the random choice of song with this.src = srcAudio, similar to how you are for the initial selection:
function StartOrStop(audioFile) {
srcAudio = sounds[Math.floor(Math.random() * sounds.length)];
var audie = document.getElementById("myAudio");
audie.addEventListener('ended', function() {
this.currentTime = 0;
this.src = srcAudio;
this.play();
}, false);
if (audie.paused == false) {
audie.pause();
} else {
audie.src = srcAudio;
audie.play();
}
}
Hope this helps! :)

Javascript/HTML5 - Save mute on localstorage

I'm creating 5 games with javascript and html5 and I'm using sound. I have a mute button that activates the function down bellow. Thing is, I want to make so that if I press the mute button and I move to another page, it will still be muted, but I can't seem to figure out how to integrate it in this function. If someone could help me out by editing the code, I'd really apreciate it :D
function init(){
audio = new Audio();
audio.src = "sound/paint_Music.mp3";
audio.loop = true;
audio.autoplay = true;
mutebtn = document.getElementById("mutebtn");
mutebtn.addEventListener("click", mute);
function mute(){
if (audio.muted){
audio.muted = false;
document.getElementById("mutebtn").src = "img/soundON.png";
} else {
audio.muted = true;
document.getElementById("mutebtn").src = "img/soundOFF.png";
}
}
}
Modify your function like this
function init() {
audio = new Audio();
audio.src = "sound/paint_Music.mp3";
audio.loop = true;
audio.autoplay = true;
var muteState = localStorage.getItem('muteState');
if (!muteState || muteState !== 'true') {
audio.muted = false;
document.getElementById("mutebtn").src = "img/soundON.png";
}
else {
audio.muted = true;
document.getElementById("mutebtn").src = "img/soundOFF.png";
}
mutebtn = document.getElementById("mutebtn");
mutebtn.addEventListener("click", mute);
function mute() {
if (audio.muted) {
audio.muted = false;
document.getElementById("mutebtn").src = "img/soundON.png";
} else {
audio.muted = true;
document.getElementById("mutebtn").src = "img/soundOFF.png";
}
localStorage.setItem('muteState', String(audio.muted));
}
}
Add the muted value to your localStorage in your 'mute' method.
function mute(){
...
audio.muted = false;
localStorage.setItem('muted', 'false');
} else {
audio.muted = true;
localStorage.setItem('muted', 'true');
}
}
}
Then on your init retrieve the localStorage value or default to false if it wasn't set prior.
function init(){
audio = new Audio();
audio.src = "sound/paint_Music.mp3";
audio.loop = true;
audio.autoplay = true;
var isMuted = (localStorage.getItem("muted") && localStorage.getItem("muted") == 'true') || false
audio.muted = isMuted;
mutebtn = document.getElementById("mutebtn");
mutebtn.addEventListener("click", mute);
}

Categories