I made a quick audio player that has multiple instances. When you click to play, the playing var is set to true. If one would click on a different instance of .playAudio, I'm trying to set the lastPlayed instance to false.
I have a portion where I commented out the part I can't figure out.
JQUERY:
var lastPlay
var lastSelected
$('.playAudio').each(function(){
var audio = $(this).find('audio').get(0);
var playing = false
$(this).hover(function() {
if (playing) {
$(this).css({backgroundPosition: '-60px -60px'})
} else {
$(this).css({backgroundPosition: '0px -60px'})
}
},function() {
if (playing) {
$(this).css({backgroundPosition: '-60px 0'})
} else {
$(this).css({backgroundPosition: ''})
}
});
$(this).click(function(){
if (playing) {
playing = false
$(this).css({backgroundPosition: '0 60px'})
audio.currentTime = 0
audio.pause()
} else {
if (lastPlay) {
//** I'm trying to change the lastSelected's "playing" to false
lastPlay.pause()
}
playing = true
$(this).css({backgroundPosition: '-60px -60px'})
audio.play()
lastPlay = audio
lastSelected = $(this)
}
})
})
Here's one way to do it:
var lastPlay,
lastSelected,
Audios = [];
$('.playAudio').each(function(i){
var Audio = {};
Audios[i] = Audio;
Audio.audio = $(this).find('audio').get(0);
Audio.playing = false;
$(this).hover(function() {
if (Audio.playing) {
$(this).css({backgroundPosition: '-60px -60px'});
} else {
$(this).css({backgroundPosition: '0px -60px'});
}
},function() {
if (Audio.playing) {
$(this).css({backgroundPosition: '-60px 0'});
} else {
$(this).css({backgroundPosition: ''});
}
});
$(this).click(function(){
if (Audio.playing) {
Audio.playing = false;
$(this).css({backgroundPosition: '0 60px'});
Audio.audio.currentTime = 0;
Audio.audio.pause();
} else {
if (lastPlay && Audios[lastPlay]) {
Audios[lastPlay].audio.pause();
Audios[lastPlay].playing = false;
}
Audio.playing = true;
$(this).css({backgroundPosition: '-60px -60px'});
Audio.audio.play();
lastPlay = i;
lastSelected = $(this);
}
});
});
I've changed your script in a few ways:
I'm capturing the first parameter that jQuery passes into .each and using it as Unique Identifier between Audio Players
For each audio player the <audio> element, and it's playing state are being kept in the local Object Audio
I store a reference to each Audio Object as an array element in the global array Audios; using the unique identifier as the index
lastPlay now only holds the unique identifier of the last played audio element; I use it to access the appropriate Object in the Audios array, and set the relavent playing when necessary.
Related
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);
}
};
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! :)
I am trying to have my player go to next song but I cant seem to get my code to work. So far play and pause work perfectly but the next function is not responsive.
SC.get("/tracks/316493713").then(function(response) {
console.log(response);
})
SC.get("/tracks/323674116").then(function(response) {
console.log(response);
})
//create an object to hold track id and SC stream
function SoundCloud(){
this.trackId = [316493713,323674116]
this.song = SC.stream('/tracks/' + this.trackId[index])
}
var jukebox = new SoundCloud();
//play
SoundCloud.prototype.play = function() {
this.song.then(function(player) {
player.play();
})
}
//pause
SoundCloud.prototype.pause = function(){
this.song.then(function(player){
player.pause();
})
}
//next functionality not working.
SoundCloud.prototype.next = function(){
this.song.then(function(player){
if(index === this.song.length-1){
index =0;
} else {
index++;
}
this.song.currentTime = 0;
this.song.play();
})
}
I am developing a javascript application where I have to do this.
Check every 5 seconds that whether the page contains an element with tag.
Once, the tag is detected, then start my video tracking function.
DO NOT check again every 5 seconds that whether the page contains an element with tag - once a tag has been detected and my video tracking function has been started.
Here is my code:
<script>
setInterval(function() {
var myVideo = document.getElementsByTagName('video')[0];
console.log(myVideo);
if (myVideo != null)
{
myVideo.id = 'video-stream';
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
colors.on('track', function(event) {
if (event.data.length === 0) {
// No colors were detected in this frame.
} else {
event.data.forEach(function(rect) {
console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
});
}
});
tracking.track("#video-stream", colors);
}
}, 5000);
</script>
Right now, it just keeps checking even if a tag is detected, So how do I stop it from checking once it if (myVideo != null) condition is fulfilled and it has gotten into it?
Any suggestions will be highly appreciated.
The setInterval function returns a value with you can then use to stop the interval in conjunction with clearInterval, so in your case:
var interval = setInterval(function() {
...
if (myVideo !== null) {
clearInterval(interval)
}
...
}, 5000);
I hope that helps.
Create a function, which calls itself after 5s if the tag doesn't exist:
function testVideo() {
var myVideo = document.getElementsByTagName('video')[0];
console.log(myVideo);
if (myVideo != null) {
myVideo.id = 'video-stream';
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
colors.on('track', function(event) {
if (event.data.length === 0) {
// No colors were detected in this frame.
} else {
event.data.forEach(function(rect) {
console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
});
}
});
tracking.track("#video-stream", colors);
}
else {
setTimeout(test, 5000); //try again in 5s
}
} //testVideo
testVideo(); //call the function
You should define your interval in variable and when you detect the video you should use clearInterval()
https://jsfiddle.net/o127oqjr/
var myInterval = setInterval(function() {
var myVideo = document.getElementsByTagName('video')[0];
console.log(myVideo);
if (myVideo != null)
{
clearInterval(myInterval);
myVideo.id = 'video-stream';
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
colors.on('track', function(event) {
if (event.data.length === 0) {
// No colors were detected in this frame.
} else {
event.data.forEach(function(rect) {
console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
});
}
});
tracking.track("#video-stream", colors);
}
else{
console.log('notFound')
}
}, 5000);
This is my interpretation of a custom Soundcloud player using JavaScript SDK. I would like to reset playlist after last track is finished, which is partially acheved - 1st track is properly set, but my counter variable for next/prev buttons doesn't update.
Or maybe there is a better way to loop through the playlist than having a counter variable?
var autoplay = false;
$(document).ready(function() {
SC.get( '/resolve', {url: 'https://soundcloud.com/rockcurrent/sets/rc-playlist-new-rock-releases'}, function(pl) {
var i = 0;
var track_url = pl.tracks[i].uri;
var stream_sound = function(i) {
track_url = pl.tracks[i].uri;
SC.stream(track_url, function(sound) {
var new_play = function() {
sound.play({
onplay: function() {
title(i);
},
whileplaying: function() {
loader(this.position, this.duration);
},
onfinish: function() {
if (i < pl.tracks.length -1) {
i++;
autoplay = true;
}
else {
i = 0;
}
stream_sound(i);
}
});
}
new_play();
sound.pause();
if (autoplay) {
sound.resume();
is_playing = true;
}
autoplay = false;
$('#play').on('click', function() {
togglePause();
});
});
}
stream_sound(i);
$('#next').on('click', function() {
soundManager.stopAll();
if (i < pl.tracks.length -1) {
i++;
}
autoplay = true;
stream_sound(i);
});
$('#prev').on('click', function() {
soundManager.stopAll();
if (i > 0) {
i--;
}
autoplay = true;
stream_sound(i);
});
});
});