developing Web app for gear s2, I am trying to play next/previous audio file when bezel is rotated clockwise/counterclockwise.
just like the "Music Player" on the watch.
what I tried so far is as follows, but only the second song plays when I rotate the bezel clockwise and when I rotate CCW, only the first song plays.
I don't know how to write it so that EACH time that I rotate the bezel, it goes to the next song.
var audio = new Audio();
var source = ["songs/coldplay.mp3", "songs/abba.mp3", "songs/goodbye.mp3", "songs/sleep.mp3"];
var i = 0;
var current = null;
rotaryDetentHandler = function(e) {
direction = e.detail.direction;
if (direction === "CW") {
if(i <source.length)
i++;
else i=source.length;
}
if (direction === "CCW") {
if(i>0)
i-- ;
else i = 0;
}
if(current !=null)
{stop();}
audio.src = source [i];
audio.load();
audio.play();
current = audio;
}
function stop()
{
current.pause();
}
Hopefully someone can find out what the problem is or if there is another way to do it.
Thank you.
for anyone having this problem, I finally found out what the problem is.
You have to add an EventListener to the page, like below:
page.addEventListener("pagebeforeshow", function() {
// do something
});
Related
I tried making a visual novel for learning. I can't figure out how to stop/pause my audio file in javascript/jQuery.
I want to play and pause different music if a character appears. They appear if the counter has a certain value - the music has to do the same. The music starts playing when the data-current is at 2 but doesn't pause/stop with the method pause() at data-current == 5
How can I solve this problem?
$('#textbox').click(function () {
// ...
var musics = ['MagicalForest.mp3', 'bunnymusic.mp3', ]
var IntroAudio = new Audio(musics[0]);
var bunnyAudio = new Audio(musics[1]);
if ($('#textbox').attr('data-current') == 2) {
IntroAudio.play();
}
if ($('#textbox').attr('data-current') == 5) {
IntroAudio.pause();
bunnyAudio.play();
};
};
so, i've been toying with this for a little bit and i am awful with JS but i feel like I'm really close to figuring it out, so even just being pointed in the right direction would help.
Right now i have audio that plays persistently across page changes via cookies, and that part is working great. however when the song source changes, I would really like the song to start back at 0. (Right now it just keeps playing at the value the cookie currently holds.)
This is what I have so far:
var song = document.getElementsByTagName("audio")[0];
var source = song.currentSrc;
var originalSource = source;
var played = false;
var tillPlayed = getCookie("timePlayed");
function update()
{
if(!played){
if(tillPlayed){
if (source == originalSource){
song.currentTime = tillPlayed;
song.play();
played = true;
}
else {
song.currentTime = 0;
cong.currentTime = tillPlayed;
song.play();
played = true;
}
}
else {
song.play();
played = true;
}
}
else {
setCookie('timePlayed', song.currentTime);
}
}
setInterval(update,0);
And it just makes the song not play at all.
It looks like it should be correct, and i'm just at a loss at this point as to why it's not working.
Anyone have any tips on getting it to function?
EDIT:
Ive moved the extra code into the original function, this is what I have at this point. It's still not working, the music will play again, but it doesn't reset the cookie.
The cookie does function as it should, I am just trying to change it
It looks like you are assigning the value from the cookie to song.currentTime immediately after resetting it with
song.currentTime = 0;
song.currentTime = tillPlayed;
Depending on your overall implementation you can solve that a couple ways as described in the comments in this variant of your solution:
var song = document.getElementsByTagName("audio")[0];/* orgiinal source song of the html player */
var source = getCookie("mySong");
if (source) /* You may different/additional logic for your exact use case*/
song.currentSrc = source /*Set audio player's source */
else
source = song.currentSrc; /*Save audio player source */
var originalSource = source;
var played = false;
var tillPlayed = getCookie("timePlayed");
function update()
{
if(!played)
{
if(tillPlayed)
{
if (source == originalSource) /* Note this this will only detect if the audio has since we came into the page. */
{
song.currentTime = tillPlayed;
song.play();
played = true;
}
else
{
song.currentTime = 0;
/* Since we just reset we do not want to retrieve the existing value in the cookie*/
/* cong.currentTime = tillPlayed; */
setCookie('timePlayed', song.currentTime); /* Store the reset value in the cookie. If the condition at the end is removed, you don't need to do this here. */
setCookie('mySong', song.currentSrc);
song.play();
played = true;
}
}
else
{
song.play();
played = true;
}
}
/* If it does not interfere with existing logic,
consider removing the else and always storing the value in the cookie here.
*/
else
{
setCookie('timePlayed', song.currentTime);
setCookie('mySong', song.currentSrc);
}
}
setInterval(update,0); /* Note that values of < 10ms resolve to 10ms */
Hope that helps
I have a few events in my app that make sounds.
For example,
Background music which is looped
Background on click makes a sound
When two rectangles collide it makes a sound
What i want to have is a button which when clicked toggles between letting the sounds play and not letting them play.
I don't want to have a load of if statements on each sound, so is there a way around this ?
Here is how im calling my sounds at the moment
//HTML
<div id='mainRight'></div>
//JS
var mainRight = $('#mainRight');
$(mainRight).width(windowDim.width/2).height(windowDim.height);
$(mainRight).addClass('mainRight');
var sounds = {
coinHit : new Audio('./sound/coinCollect.wav'),
playerClick : new Audio('./sound/playerClick.wav'),
gameOver : new Audio('./sound/gameOver.wav'),
backgroundMusic : new Audio('./sound/backgroundMusic.wav')
}
sounds.backgroundMusic.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
sounds.backgroundMusic.play();
sounds.backgroundMusic.volume = 0.01;
$('#mainRight').click(function()
{
sounds.playerClick.load();
sounds.playerClick.play();
}
Try this...
function toggleAudio() {
for(var key in sounds) {
sounds[key].muted = !sounds[key].muted;
}
}
Just fire that every time you hit the mute button. It will toggle the muted state of each Audio object in the sounds object.
I need to include some sound files on a website, i recorded them and used the super complicated:
<a href="seo.html" onmouseover="new Audio('sounds/seo.mp3').play()">
to play them when the user scrolls over with the mouse. There are a total of four links on the website.
The problem is, when i mouse over one of them it starts playing, and then if i mouse over another it plays that one as well. If i move the mouse really fast accross the links i end up getting Giberish because all files are being played at the same time. How do i stop this ??
Ideal would be that the others CANNOT be played until the current playing is finished :)
An approch below.
Note, untested ;-)
HTML
a sound link -
a sound link -
a sound link -
a sound link
JS
var links = document.querySelectorAll('a.onmousesound');
var currentPlayedAudioInstance = null;
var onHoverPlaySound = function(element) {
if (currentPlayedAudioInstance &&
currentPlayedAudioInstance instanceof Audio) {
// is playing ?
// http://stackoverflow.com/questions/8029391/how-can-i-tell-if-an-html5-audio-element-is-playing-with-javascript
if (!currentPlayedAudioInstance.paused && !currentPlayedAudioInstance.ended && 0 < currentPlayedAudioInstance.currentTime) {
return false;
}
}
var file = element.getAttribute('data-file');
currentPlayedAudioInstance = new Audio(file);
currentPlayedAudioInstance.play();
};
for (var i = 0; i < links.length; i++) {
link.addEventListene('onmouseover', function() {
onHoverPlaySound(links[i]);
});
};
I'm trying to create an animation of series of images with background audio using HTML5 and javascript maybe ajax or jquery. I'm basically trying to make an animation of a simple conversation between several people (portrayed by images) and speech through (audio).
I have an audio file (mp3/ogg) and a series of images. When I play the audio, the sequence of images will be displayed accordingly.
Here's the catch, If I pause or replay the audio, sequence of image must also stop or replay from the start.
So the sequence of images must be in sync with the audio playing.
Any ideas or concepts? Right now I have a working jPlayer with play/pause. Also can it be done with jPlayer?
Just make your decisions based on the currentTime of your audio. Example
var audio = document.querySelector('audio'),
img = document.querySelector('img'),
imgs = ['http://raptorsrepublic.com/wp-content/uploads/2012/08/meh_cat.jpg', 'http://2.bp.blogspot.com/_8tZf9lm-smo/R7hn7pNx-jI/AAAAAAAAALI/86DN7VedT_Q/s400/meh.jpg', 'http://2.bp.blogspot.com/-yWsoWNVX4jU/UAy5uJxD52I/AAAAAAAANSc/OTje6k_C5Q8/s1600/meh2.jpg'],
duration, interval, currentImg;
(function callee(ready) {
if (ready !== false) ready = true;
if (!ready) {
return audio.addEventListener('canplaythrough', callee);
}
if (!audio.playing) audio.play();
if (!duration) {
duration = audio.duration;
interval = duration / imgs.length;
}
if (isNaN(duration)) return setTimeout(callee, 1000);
var currentTime = audio.currentTime;
if (!currentImg) {
img.src = currentImg = imgs[0];
}
var currentTimeImage = imgs[Math.floor(currentTime / interval)];
if (currentTimeImage != currentImg) {
img.src = currentImg = currentTimeImage;
}
setTimeout(callee, 1000);
})(false);