How to add/remove items(music tracks) in angularjs?

20 views
Skip to first unread message

sachin sapre

unread,
Jun 17, 2020, 1:20:41 AM6/17/20
to Angular and AngularJS discussion

Hey,

I am learning angularjs and trying to create music player. 
But unable to add music tracks in existing playlist from another playlist(which will be on left side).



Thanks.

Code below:

<!---index.html--->

<div class="player-container">
<div ng-app="myApp">
<player-directive ng-controller="PlayerCtrl as PCtrl" playlist="{{PCtrl.tracks}}"></player-directive>
</div>
</div>


-------------------------------------

<!----playerDirective.js----->

(function () {
    'use strict';

    angular
        .module('myApp')
        .directive('playerDirective', playerDirective);

    function playerDirective($window, $templateCache, $compile, $http) {
        var directive = {
            link: link,
            restrict: 'AE',
            replace: true

        };
        return directive;

        function link($scope, element, attrs) {

            var template = '<div  class="panel panel-primary player">' +
                '<div class="panel-heading">' +
                '<span ng-init="ListShowed=true" ng-click="ListShowed=!ListShowed" class="nav-btn-left glyphicon glyphicon-list"> <label class="duration-value">{{fancyTimeFormat(currentSec)}}/{{fancyTimeFormat(durationSec)}}</label></span>' +
                '<span ng-click="prevTrack()" ng-class="tracks.length>1?\'nav-btn-right glyphicon glyphicon-step-backward\':\'nav-btn-right-disable glyphicon glyphicon-step-backward \'"></span>' +
                '<span ng-click="played=!played; played ? play() :StopTrack();" ng-class="played?\'nav-btn-play glyphicon glyphicon-pause\':\'nav-btn-play glyphicon glyphicon-play\'" ng-style="{\'color\':tracks.length>0?\'white\':\'grey\'}"></span>' +
                '<span ng-click="nextTrack()" ng-class=" tracks.length>1 ?\'nav-btn-next glyphicon glyphicon-step-forward\':\'nav-btn-next-disable glyphicon glyphicon-step-forward \'"></span>' +
                '<div class="nav-btn-volume "> <div class="slidecontainer-volume">' +
                '<input type="range" min="0" max="100" ng-model="currentVolume" ng-change="changeVolume(currentVolume)" class="slider" >' +
                '<input type="range" min="0" max="100" ng-model="currentVolume" ng-change="changeVolume(currentVolume)" class="slider" ></div><span  ng-click="currentVolume>0?currentVolume=0:currentVolume=100;changeVolume(currentVolume)" ng-class="currentVolume>0 ? currentVolume<60 ? \'nav-vol-btn glyphicon glyphicon-volume-down\':\'nav-vol-btn glyphicon glyphicon-volume-up\':\'nav-vol-btn glyphicon glyphicon-volume-off\'"></span></div>' +
                '<div class="slidecontainer"><input type="range" min="0" max="{{durationSec}}" ng-model="currentSec" ng-change="changeCurrentTime()" class="slider" ></div></div>' +
                '<div ng-show="ListShowed" class="panel-body body-list">' +
    
                '<div class="list">' +
                '<div ng-repeat="track in tracks" ng-click="setSelected(track);play();" ng-class="track != selectedTrack ? \'track\' : \'selected-track\'" >{{track.title}}</div></div>' +
                '</div></div><audio></audio>';

            element.html(template);
            $compile(element.contents())($scope);
            var elem = element[0];
            $scope.tracks = JSON.parse(attrs.playlist);
            $scope.selectedTrack = $scope.tracks[0];
            $scope.durationSec = 0;
            $scope.currentSec = 0;
            $scope.currentVolume = 100;
            $scope.played = false;
            $scope.fancyTimeFormat = function (time) {
                var hrs = ~~(time / 3600);
                var mins = ~~((time % 3600) / 60);
                var secs = time % 60;
                var ret = "";
                if (hrs > 0) {
                    ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
                }
                ret += "" + mins + ":" + (secs < 10 ? "0" : "");
                ret += "" + Math.round(secs);
                return ret;
            }

            $scope.setSelected = function (track) {

                $scope.selectedTrack = track;

            }

            $scope.setDuration = function (value) {

                if (value != $scope.durationSec) {
                    $scope.durationSec = value;
                    $scope.$apply();
                }
            }
            $scope.setCurrent = function (value) {
                if (value != $scope.currentSec) {
                    $scope.currentSec = value;
                    $scope.$apply();
                    if (value == $scope.durationSec) $scope.nextTrack();
                }
            }

            $scope.changeCurrentTime = function () {
                $scope.changeCurrentTime(currentSec);
            }

            $scope.changeCurrentTime = function () {
                var player = elem.childNodes[1];
                player.currentTime = $scope.currentSec;
            }

            $scope.changeVolume = function (value) {
                var player = elem.childNodes[1];
                player.volume = value * 0.01;
            }

            $scope.PlayTrack = function (source) {
                var player = elem.childNodes[1];
                player.addEventListener("loadeddata", function () {
                    $scope.setDuration(Math.round(player.duration));
                });

                player.addEventListener("timeupdate", function () {

                    $scope.setCurrent(Math.round(player.currentTime));
                });
                if (source != $(player).attr("src")) $(player).attr("src", source);
                player.play();
            }

            $scope.play = function () {
                if ($scope.tracks.length > 0) {
                    $scope.PlayTrack($scope.selectedTrack.source);
                    $scope.played = true;
                } else {
                    $scope.played = false;
                }
            }
            $scope.StopTrack = function () {

                var player = elem.childNodes[1];
                $scope.played = false;
                player.pause();
            }
            $scope.prevTrack = function () {
                if ($scope.tracks.length > 1) {
                    let indx = $scope.tracks.indexOf($scope.selectedTrack) - 1;
                    indx >= 0 ? $scope.selectedTrack = $scope.tracks[indx] : $scope.selectedTrack = $scope.tracks[$scope.tracks.length - 1];
                    $scope.play();
                    $scope.played = true;
                }
            }
            $scope.nextTrack = function () {
                if ($scope.tracks.length > 1) {
                    let indx = $scope.tracks.indexOf($scope.selectedTrack) + 1;
                    indx < $scope.tracks.length ? $scope.selectedTrack = $scope.tracks[indx] : $scope.selectedTrack = $scope.tracks[0];
                    $scope.play();
                    $scope.played = true;
                }
            }
        }
    }
})();


------------------------------------------------------------

<!---player.controller.js--->

var app = angular.module('myApp', []);
app.controller("PlayerCtrl", PlayerCtrl);

function PlayerCtrl($scope) {
vm = this;

vm.tracks = [{ source: "music-track-1.mp3", title: "music track 1"}, 
{ source: "music-track-2.mp3", title: "music track 2" }, 
{ source: "music-track-3.mp3", title: "music track 3" }, 
{ source: "music-track-4.mp3", title: "music track 4" }, 
{ source: "music-track-5.mp3", title: "music track 5" }
];};




Reply all
Reply to author
Forward
0 new messages