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.)
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 trying to save the current volume of my jPlayer to a cookie. This is my code.
//Save the jPlayer volume when it changes.
$("#startpage_jplayer").bind($.jPlayer.event.volumechange, function(event){
//Cache the volume value.
var new_volume = event.jPlayer.options.volume;
//Store the volume in a cookie.
$.cookie('jp_volume', new_volume, { expires: 7, path: '/'});
});
Each time the volume changes I get that there is no options property.
I suppose they moved the property but it's really hard to find the new one.
Thank you for your time.
Console Screenshot
I used some deprecated event detection methods before and when I updated my code, my server did not clear the cache after flushing it 5 times.
The code is fine, thus problem solved !
Environment
NW.js v0.12.3
io.js v1.2.0
32 bits
Windows 8
Webchimera.js (player)
The following code works but I'm left wondering if it's the best approach. The requirement is to get the length of each video that's in the playlist.
To do that I use the events onPlaying and onPaused.
wjs = require('wcjs-player');
...
chimera_container = new wjs("#chimera_container");
chimera_player = chimera_container.addPlayer({ mute: true, autoplay: false, titleBar: "none" });
chimera_player.onPlaying( OnPlaying ); // Pauses player
chimera_player.onPaused( OnPaused ); // Extracts length information
var OnPlaying = function(){
chimera_player.pause();
};
var OnPaused = function() {
console.log( chimera_player.itemDesc(chimera_player.currentItem()).mrl , chimera_player.length());
if(!chimera_player.next())
chimera_player.clearPlaylist();
};
At first I tried doing all the code in the event onPlaying but the app always crashed with no error. After checking chimera_player.state() it seemed that even after doing chimera_player.pause() the state didn't change while inside the onPlaying event. I figure having state Playing and trying to do chimera_player.next() causes the exception.
This way seems a bit hacky, but I can't think of another one.
My approach was definitely not the best. #RSATom kindly exposed the function libvlc_media_get_duration in the WebChimera.js API.
In order to get the duration all that is needed is:
... after adding playlist...
var vlcPlaylist = chimera_player.vlc.playlist;
for(var i=0, limit=chimera_player.itemCount(); i<limit; ++i ){
var vlcMedia = vlcPlaylist.items[i];
vlcMedia.parse(); // Metadata is not available if not parsed
if(vlcMedia.parsed)
// Access duration via --> vlcMedia.duration
else
logger("ERROR -- parsePlaylist -- " + vlcMedia.mrl );
}
If you are going to try to get duration from files with MPEG format then you are in for a headache. In order to have VLC return duration of MPEG file before playing the video, it is necessary that its Demuxer is set to Avformat demuxer. Problem is you can't do that via the libvlc api. If demuxer is not set, then vlcMedia.duration will always return 0.
There's two options here:
Use ffprobe to access video metadata and forget doing it via libvlc
Play with this posts' original way of getting duration via a combination of play() pause() events.
I've tried find any function in libvlc API allowed get media length without playing it - with no success. So it's very possible there are no way to get media length without playing it.
I was wrong, it's possible (with libvlc_media_get_duration), but it's not exposed in WebChimera.js API yet. I'll add it if you will create issue for it on GitHub.
P.S.: And it will be great if you will create issues on GitHub for discovered crashes...
upd: required API implemented
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.
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
}