perminder-klair / angular-soundmanager2 Goto Github PK

I would like, when a user open the page music is automatically played. I see in the js file there is an option to set autoplay to true, but don't know where to go from here.

Hi

I tried using angular-soundmanager2 for playing Icecast Stream. Its showing the error "Media resource http://192.64.83.67:8000/airtime_128 could not be decoded", where http://192.64.83.67:8000/airtime_128 is my icecast stream url.

Can you check this and let me know how to fix this.

Thanks

hello,
How to get to defoultOptions on load of script?

    soundManager.setup({
        defaultOptions: {
          // set global default volume for all sound objects
          volume: 30
        }
    });

It dosnt work :/

I don't get it why sometimes the song start but neither currentDuration and progress shows up. In a playlists, sometimes it shows only before play two or more songs.

Here's how I start my playlist

$timeout(function() {
        angularPlayer.clearPlaylist(function() {
          angular.forEach(data.midia, function(item) {
            if(!BaseHelper.isNullOrEmpty(item)) {
              angularPlayer.addTrack(item);
            }
          });
          angularPlayer.play();
        });
}, 0);

<div class="duration" layout="row" layout-align="space-between center">
      <div class="left">{{ currentPostion }}</div>
      <div class="seekBase" seek-track>
        <div class="seekLoad" ng-style="{width : ( progress + '%' ) }"></div>
      </div>
      <div class="right">{{ currentDuration }}</div>
</div>

Checking the duration:

$rootScope.$on('currentTrack:duration', function(event, data) {
    console.log(data);
  });

... at the first time I got 0 (zero). At the second time I got 10913.469.

Does anyone have any idea?

Is there a way to eliminate the gap between tracks?

When playing a list of tracks, there is a gap of approx 0.5 seconds between each track.
I'd like to set it to zero. Ist that possible?

We are working on streaming audio file using rest api which is authenticated.
We are facing issues in passing authentication to the Header. Using this library is there any way to pass authenticated http requests.

Please suggest asap.

Hi,

Why i can't handle the progress of songs on the player. i want to change position of cursor by my mouse.

there are so many apply used in the code that many app , can encounter such an error ,
there should be a $timeout(init(),0); to avoid such an error ,

In Sound Manager.js there is a toggle pause function. How would you create a custom directive for this?

i have changed to use your sound js,very awesome. i try to find a song's ending flag that i can control one song's repeatting by using $watch, not the all list song's repeatting.hoping to add that function.

Whenever I try to use the factory methods directly, I get errors from Angular saying that apply() is already in progress.

Add a possibility to play the playlist in a randomly chosen order

(like the repeat-posibility, toggle to activate)

i have a player and i need the set a music from page load.

and when the User click play he already play this music that I set , and if he chooses another song change

Is 360 Player going to be involved in this?

http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html

When playing a track and setting the volume, if you change track the volume resets to the default volume of 90. The value of "Volume: " in the player's HTML will remain at the last value set, but the actual volume would have reverted to default.

I noticed on inspection of the JS (snippet below [Ln: 4734 - 4744]) that the volume controls only set the volume of the current track being played by SoundManager, as soon as another track is loaded, the getVolume() function is called again and returns the default volume, until you change the volume again via the controls.

getVolume: function() {
                return volume;
            },
adjustVolume: function(increase) {
                var changeVolume = function(volume) {
                    for(var i = 0; i < soundManager.soundIDs.length; i++) {
                        var mySound = soundManager.getSoundById(soundManager.soundIDs[i]);
                        mySound.setVolume(volume);
                    }
                    $rootScope.$broadcast('music:volume', volume);
                };

If next-track is activated but there is no next track, the music continues, but isPlaying is set to false.

This error occurs when angularPlayer service is used and soundManager directive exists on the page.

Example:

1. Call angularPlayer.addTrack inside ng-click event handler.
   Note: Every ng-something handler is executed in $apply phase by AngularJS.
2. Method angularPlayer.addTrack broadcasts player:playlist event.
3. SoundManager directive catches the event.

scope.$on('player:playlist', function(event, data) {
    scope.$apply(function() {
        scope.playlist = data;
    });
});

Note: We are still in $apply phase, because angular events are handled synchronously.
4. Error occurs

Error: [$rootScope:inprog] $apply already in progress

The plunker is here http://plnkr.co/edit/77Fy0oJpvRrPrmG1YRbR?p=preview.

How can I add songs and playlist from angular controllers?

Great job with the port! Works great so far with mp3 urls. I have not had the same success with SoundCloud stream urls (which I believe do a 3xx redirect), unfortunately.

So basically , if you put the below url complete with client_id in a browser (I use Chrome), the browser should resolve the final url for a SoundCloud stream_url. When I try to put the same url into SoundManager2 (and I've included a type hint as well) I get the console error: 'invalid song url'

Here is the song I'm trying to load in

$scope.songs = [
        {
            id: 'one',
            artist: 'Chymera',
            url: 'http://api.soundcloud.com/tracks/132994010/stream?client_id=f18fec54bc96c697f0caf6aedc92f666',
            type: 'audio/mp3'
         }
    ];

Has anyone had any luck resolving a SoundCloud streaming track? Any advice here?

Hi
How Can I add 360 UI template ?

There is a possibility to show the current song name that goes on the shoutcast radio?

Would be great to have some quick reference about what events are emitted by the angularPlayer.
E.g: track:progress, music:isPlaying

Only first song is playing in playlist among all songs, can you please help me.

How do i set the play position or the regress bar manually.
my app saves the last play position of the user, so that they can resume even after they restart their phone.
i am however finding it difficult setting the position manually.
I will be glad if anyone can help.. thank you

Hi Perminder:

play-all is a rad directive. Would it be easy to include an add-all directive that enqueues all tracks in list 'songs'?

link to current directives for anyone interested: http://perminder-klair.github.io/angular-soundmanager2/ref/directives.html

Thanks!
Nick D.

When I pause one running audio on 00:20, it pauses at 00:10 or anything less than 00:20(lets say, 00:10). when clicking play button again it resumes from that location(at 00:10), not from 00:20.
additionally, if i pause in future (eg. somewhere at 00:40, 01:32 etc) the position of 'progress' comes back at 00:10 and resumes from there only.
I tried to fix this, but couldn't succeed. your help will be really helpful.

can you add functionlity to fetch buffering position? just to show how much data is in buffer.

I'm wondering if it's possible to create a playlist (for example 5 tracks), without passing the url of each track. And before play every track get the URL from an external service and then play it.

I think it's not possible, because when you add a song to a playlist you create a sound using: soundManager.createSound (and in this moment you really need to have the url of that track).

It looks like this project is abandoned. Our team has forked the project and will be happy to support/update the project as needed.

Please send Pull Requests/Issues to: https://github.com/fiddioteam/angular-soundmanager2

Thanks!!

Main files in the project are using 4 spaces for tab. Gruntfile is a mix of both. Would be nice to have consistent file.

Search scope.currentPostion

hi, i found that if lazy load angular-soundmanager2.js after DOMContentLoaded, the code is not running correctly. because soundManager don't run DOMContentLoaded callback.

do you want to consider this situation?

Normally in Windows google chrome it works fine. but in my mobile browser or after installing the native app on mobile current playing got stuck when I add something new to the playlist. Please solve the issue.

Hello, i am facing a problem when i update my playlist run time. what i need to do is load songs based on user preferences. when my current song is playing and i load new songs my current playing song stops in mobile. When i use clearPlaylist it doesnt work but if i remove songs from playlist then it works fine in web but song stops in mobile. I want to load new songs without halting the current playing song.
is there any way to start song from particular time ?? like play song from 1:10

here is my code ::

$timeout(function() {
angularPlayer.clearPlaylist(function(result){
angularPlayer.addTrack(song);
});
},0);

Please help.

hi,
I'm notice that there is a problem on safari browser.

soundManager.createSound(): Unavailable - wait until onready() has fired.
soundManager.play(): Unavailable - wait until onready() has fired.

Please help 🙏

How can I disable the $logs?

SoundManager V2.97a.20140901 (HTML5-only mode)
SoundManager 2 HTML5 support: mp3 = true, mp4 = true, ogg = true, opus = true, wav = true
SoundManager 2: Ready. ✓

In iOS browser, when a track is playing and I add a second track to the playlist, the first track stops playing.

It works correctly in desktop chrome, but not in iOS browser.

First, thanks for your effort on this great library.
I notice when I try to remove all songs from playlist which including 40+ songs, it always takes a long time. In clearPlaylist I notice the function loop setTimeout is 100ms, which is too long for long list. I modify it to 0 and it works great.
I don't check the code related, is it the good practice? Why the initial timeout is 100ms?

Play is not working, can you check and update me, need to use it in my application.

First of all thanks for all your effort in writing this angular wrapper!
There are two things that might be helpfull to implement in my opinion.
First change scope.$apply in the main directive to scope.$applyAsync as it gives Error: [$rootScope:inprog] $apply already in progress

I didn't see a play/pause function in the factory. As I understand you use initPlayTrack for that function.

I suggest to implement isResume to playTrack like this

ngSoundManager.factory( ...

        playTrack: function(trackId,isResume) {
            this.initPlayTrack(trackId,isResume);
        }

thanks again!

I'm adding the songs to player like this:

angularPlayer.clearPlaylist(function() {
    angular.forEach(serverItems, function(item) {
      angularPlayer.addTrack(item);
    });
    angularPlayer.play();
});

But at the end, after all played how to restart the playlist and keep it in loop?

I want to volume down and up via keyboard control. And made this.

PS: Don't forget to inject "angularPlayer" to your controller.

Demo: http://play.mixboxx.com/

` $scope.setProgress = function (progress) {
var playing = soundManager.getSoundById(angularPlayer.getCurrentTrack());
if (progress == "increase") {
playing.setPosition(playing.position + 5000);
} else {
playing.setPosition(playing.position - 5000);
}
};

$document.bind('keyup', function (e) {
    if (e.keyCode == 40) {
        angularPlayer.adjustVolume(false);
    } else if (e.keyCode == 38) {
        angularPlayer.adjustVolume(true);
    } else if (e.keyCode == 37) {
        $scope.setProgress("decrease");
    } else if (e.keyCode == 39) {
        $scope.setProgress("increase");
    }
});`

Hi! First of all I'm new to soundmanager but I get this error after the track ends:
Uncaught TypeError: Cannot read property 'get' of undefined angular-soundmanager2.js:6086 init.soundManager.setup.defaultOptions.onfinish angular-soundmanager2.js:3179
(anonymous function)angular-soundmanager2.js:3466 wrapCallback angular-soundmanager2.js:3178 SMSound._onfinishangular-soundmanager2.js:3801 (anonymous function) angular-soundmanager2.js:3719 (anonymous function)

The problem seems to be the autoPlay parameter that is seted to true and since I don't have anymore tracks the error arises. Is there a way to set this parameter via attribute or something like that ?

Hello,

I would like to toggle display the player depending if a song is loaded or not.

I use currentPlaying.length in an ng-show, and it works fine. Unfortunately currentPlaying doesn't update when a remove from playlist event is triggered (when the current song is removed, or for a clearPlaylist).

I tried to add:

scope.$apply(function() {
  scope.currentPlaying = angularPlayer.currentTrackData(null);
});

to those directives but nothing works.

Any clue on how I can make it ?

Thank you,

It might be a good idea to prefix your $rootScope events with a module name or something to reduce naming collisions.

Hi ! First of all thanks for such a great module!
I noticed that the angularPlayer service init function is defined as follows

ngSoundManager.factory('angularPlayer', ['$rootScope',
function($rootScope) {
    var currentTrack = null,
        repeat = false,
        autoPlay = true,
        isPlaying = false,
        volume = 90,
        trackProgress = 0,
        playlist = [];
    return {
        init: function() {
            if(typeof soundManager === 'undefined') {
                alert('Please include SoundManager2 Library!');
            }
            soundManager.setup({
                //url: '/path/to/swfs/',
                //flashVersion: 9,
                preferFlash: false, // prefer 100% HTML5 mode, where both supported
                debugMode: false, // enable debugging output (console.log() with HTML fallback)
                useHTML5Audio: true,

The setup parameters are hard coded and I cannot enable Flash 9 and rtmp streaming. Wouldn't it be better to be able to pass the setup parameters as attributes of the angular directive? Just an idea, I am not sure if that is the best approach. What do you think ?
Perhaps something like:

<sound-manager url="/path/to/swfs/" flashVersion="9"></sound-manager>

getting error Uncaught TypeError: undefined is not a function
in line result = sm2.html5.canPlayType({type:mime});

It would be nice to be able to pull this in with NPM instead of Bower.

This looks good though, thanks!

When I am running angular-soudmanager2 components on production, there are lots of console.logs polluting console.

Would love to have possibility to make this configurable through $log service provided by angular core components.