Im playing some HTML5 audio using the Howler.js library.
Currently im able to determine the total length of the audio file with sound.duration(); however im not sure how to create a timer to show how much time that has been played.
I create a simple sound object like so:
var sound = new Howl({
src: ['sound.ogg', 'sound.mp3', 'sound.wav'],
autoplay: true,
loop: false,
volume: 1,
onload: function() {
var totalSoundDuration = sound.duration();
},
onplay: function(getSoundId) {
//sound playing
},
onend: function() {
//sound play finished
}
});
I can't seem to find any method within the library (?) to check for currentTime so I can update my timer function.
An alternative route could simply be to trigger/toggle a setInterval upon onplay: like:
var currentTimeTracker=setInterval(function () {myTimer()}, 1000);
function myTimer() {
timePlayed++;
$("#time" ).html(timePlayed);
}
Not sure if that would be a good approach? Any suggestions?
Howler.js ref:
https://github.com/goldfire/howler.js/tree/2.0#global-core-properties
According to http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library sound.pos() should get the current position. The posmethod can get or set, depending on whether you pass through the optional position parameter.
Related
I'm using plyr plugin to play a video on my website.
I'm trying to restart the player (vimeo) when the video ends but I'm not having much luck. I'm even trying to console log a message and that's not even working. Can anyone see where I'm going wrong?
JSfiddle attached here.
if ($('.main-hero__youtube__video').length) {
console.log("Video player init");
// Define the controls
var plyr_options = {
autoplay: true,
clickToPlay: true,
showPosterOnEnd: true,
controls: ['mute','progress','play']
};
// Create the plyr instances - this defines players[0] as our primary player.
var players = plyr.setup(plyr_options);
players[0].on('ended', function(event) {
console.log("test");
});
}
You were close, you just needed to call the restart() method (or play() if you're looking for an infinite loop) on your player instance:
players[0].on('ended', function(event) {
players[0].restart();
// players[0].play(); // infinite loop
});
https://jsfiddle.net/yunxyfbh/
I am working with
howler.js 2.0
but cant seem to get a simple example of updating the volume working. Here some a sample code:
window.sound = new Howl({
src:'http://example.com/assets/audio/background.mp3',
loop: true,
volume: 0.15
});
window.updateVolume = function(value) {
alert('before update volume:', window.sound.volume());
sound.volume = value;
alert('after update volume:', window.sound.volume());
}
I have tried both using volume() function and just volume property. None seem to work.
JsFiddle: https://jsfiddle.net/umx2bdm8/
What am I missing? Also, I noticed that if you click play multiple times, multiple instances of the same sound start playing. I dont want that and hitting play on a particular howl instance should always work with that instance.
If you look at howler.js 2.0’s docs for volume, it shows that volume is a function, not an assignable property, and that you need to pass in the new volume as an argument to set the volume. So you need to do sound.volume(value) instead of sound.volume = value.
sound = new Howl({
src: 'http://www.hochmuth.com/mp3/Tchaikovsky_Rococo_Var_orch.mp3',
loop: true,
volume: 0.5
});
updateVolume = function(value) {
console.log('before update volume:', sound.volume());
sound.volume(value);
console.log('after update volume:', sound.volume());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0-beta13/howler.min.js"></script>
<button onclick="sound.play()">
Play
</button>
<button onclick="updateVolume(0.15)">
Change volume to 0.15
</button>
(I switched the volume values above for demo purposes, so listeners don’t have to worry whether the music will suddenly deafen them when they click the button.)
I'm looking for a simple way to check if SoundManager2 is currently playing a sound. I was hoping for a function like "SoundManager.isSoundPlaying" but I don't see this functionality.
In SoundManager 2 there's a dynamic propierty called "playState" wich returns these values:
Numeric value indicating the current playing state of the sound.
0 = stopped/uninitialised
1 = playing or buffering sound (play has been called, waiting for data etc.)
Note that a 1 may not always guarantee that sound is being heard, given buffering and autoPlay status.
So you can do something like:
var myAudio = soundManager.createSound({
id: 'myAudioId',
url: "/audiofile/url.mp3",
autoPlay: true
});
if (myAudio.playState === 1) {
// audio playing (or buffering)
}
More info in the documentation page of SoundManager2
The main problem of "playState" is that it returns 1 even if the sound is under "pause" status.
A solution could be to check if the duration is not null, because once the sound is loaded the duration has always a value, then also check if the sound has been paused, because the duration value is kept even after you pause the sound.
A solution can be:
// assuming s is the soundmanager object
// playing status
if (s.duration&&!s.paused) {
}
else {
}
I don't think soundmanager has such a variable..
I suggest using a global variable "isPlaying" default it to false, and adding "isPlaying = !isPlaying" in your play/pause click event.
It actually has a way of saying if it's paused. Which is essentially the same thing.
Just do
if(!_audioInstance.paused){
// is playing
}
I use Soundmanager2's mp3 player button to play mp3s links on my website. I used the following modifcation in-order to preload the next mp3 during playing the current mp3.
play: function() {
sm.load('basicMP3Sound'+(1*this._data.oLink.title)+1);
//mycode end
pl.removeClass(this._data.oLink,this._data.className);
this._data.className = pl.css.sPlaying;
pl.addClass(this._data.oLink,this._data.className);
},
In the above example you may notce that the title tag in this._data.oLink.title which I added it to the mp3 link to handle files order in simple way, for example:
/002001.mp3
However, I noticed that the next mp3 link does not preloaded during playing the current mp3. This is because the next mp3 does not being played contiousely or start played after finish playing its previous mp3. In other word, it takes some time or delay to be downloaded.
Is there something wrong in my code? or what are your suggestions?
Notice a life demo of this mp3 layer is found in this link
Edit: Approach to work with the SoundManager inline button player
In your setup params in mp3-player-button.js under config, where playNext : true|false is found (line 39), update it to look like this:
...
this.config = {
// configuration options
playNext: true, // stop after one sound, or play through list until end
autoPlay: false, // start playing the first sound right away
preloadNext : true // preload next sound when previous sound starts to play
};
...
Then, further down under the this.events object (line 96), modify the play function to preload the next sound:
...
this.events = {
// handlers for sound events as they're started/stopped/played
play: function() {
pl.removeClass(this._data.oLink,this._data.className);
this._data.className = pl.css.sPlaying;
pl.addClass(this._data.oLink,this._data.className);
if (pl.config.preloadNext) {
var nextLink = (pl.indexByURL[this._data.oLink.id]+1);
if (nextLink<pl.links.length) {
sm.load(nextLink)
}
}
},
...
In summary, when a song starts, we check to see if there's a next song; if there is, we pull its id from the array of sounds that was created when we instantiated SoundManager. In this case, SoundManager is sm, so we simply pass the id of our next song to the sm.load() function.
Here is a live demo: http://plnkr.co/edit/mpBkfDIrLNduMAWJjRfN.
Try this approach:
Using the onplay and onfinish events of the createSound method, you can chain a series files which delegate each other.
Explicitly telling firstSound: "when you start to play, preload the next sound, and when you finish playing, play that next sound"
JavaScript
var firstSound = soundManager.createSound({
id: 'firstSound',
url: 'path/to/your/firstSound.mp3'
});
var secondSound = soundManager.createSound({
id: 'secondSound',
url: 'path/to/your/secondSound.mp3'
});
// Kickoff first sound
firstSound.load();
// Define the chain of events
firstSound.play({
onplay: function () {
// When `firstSound` starts, preload `secondSound`
secondSound.load();
},
onfinish: function () {
// Repeat, with next sound
secondSound.play({...
})
}
});
Im using soundcloud dot com to upload my sounds. i want to press a button within my mobile application and have that sound play.
So basically i want my sound to be referenced from the URL that I am given when the button is pressed by the user.
I need to do it with Javascript only. No HTML 5 please. Any help is greatly appreciated cause this is Xtremely frustrating. Any ideas? Thanks in advance.
It's pretty simple to get started really:
function playSound(url) {
var a = new Audio(url);
a.play();
}
Use that as whatever event handler you want for your application. Of course, I'd hope you'd want to do more than just play (for example, maybe pause would be good too?), but it's a start.
let sound = new Audio("http://sound.com/mySound.mp3");
//on play event:
sound.onplay = () => {
};
//on pause event:
sound.onpause = () => {
};
//on end event:
sound.onended = () => {
};
//play:
sound.play();
//pause:
sound.pause();
//stop:
sound.pause();
sound.currentTime = 0;
Use jPlayer to play sound using Javascript. This will take you a lot of time and frustration.
jplayer.org/
Here's what your code might look like with jPlayer. Note: You're not forced to use a skin with jPlayer because all it is is just an API to play audio.
Example code to play a video or audio on load.
$(function() { // executed when $(document).ready()
$("#jpId").jPlayer( {
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://www.myDomain.com/myVideo.m4v" // Defines the m4v url
}).jPlayer("play"); // Attempts to Auto-Play the media
},
supplied: "m4v",
swfPath: "jPlayer/js"
});
});
http://jplayer.org/latest/developer-guide/