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).
http://goindiatrade.in/angular-music-player/ 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" } ];}; -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/angular/34d8f79d-f94d-47a7-b217-1a6ae778b40bo%40googlegroups.com.
