Spotify preview試聽歌曲範例

app.js

angular.module('starter', ['ionic','starter.controllers', 'starter.services'])
        .run(function ($ionicPlatform) {
            $ionicPlatform.ready(function () {
                // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
                // for form inputs)
                if (window.cordova && window.cordova.plugins.Keyboard) {
                    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                }
                if (window.StatusBar) {
                    StatusBar.styleDefault();
                }
            });
        })
        .config(function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/app/artists");
            $stateProvider
                    .state('app', {
                        url: '/app',
                        abstract: true,
                        templateUrl: 'templates/sidemenu.html'
                    })
                    .state('app.artists', {
                        url: '/artists',
                        views: {
                            'menuContent': {
                                templateUrl: 'templates/artists.html',
                                controller: 'artistsCtrl'
                            }
                        }
                    })
                    .state('app.artist', {
                        url: '/artists/:id',
                        views: {
                            menuContent: {
                                templateUrl: 'templates/artist-details.html',
                                controller: 'detailCtrl'
                            }
                        }
                    })
                    .state('app.track', {
                        url: '/tracks/:id',
                        views: {
                            menuContent: {
                                templateUrl: 'templates/artist-tracks.html',
                                controller: 'trackCtrl'
                            }
                        }
                    })
                    .state('app.tracks', {
                        url: '/tracks',
                        views: {
                            menuContent: {
                                templateUrl: 'templates/tracks.html',
                                controller: 'alltrackCtrl'
                            }
                        }
                    });
        })

artist-details.html

<ion-view title="{{artist.name}}">
    <ion-content>
        <div class="list card">            
                <div class="item item-avatar">
                    <img ng-src="{{artist.image}}">
                    <h2>{{artist.name}}</h2>               
                    <p></p>
                </div>
                <div class="item item-body">
                    <div>專輯: {{artist.albums.length}}張</div>                
                    <div>熱門歌曲:{{artist.tracks.length}}首</div>         
                </div>
                <div class="item tabs tabs-icon-left">                    
                    <div class="tab-item"><i class="icon ion-thumbsup"></i>{{artist.popularity}}</div>
                    <div class="tab-item"><i class="ion-social-twitter-outline"></i>{{artist.followers}}</div>                    
                </div>
        </div>
    </ion-content>
</ion-view>

artist-tracks.html

<ion-view title="{{artist.name}}">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="track in artist.tracks">
                <button class="button-clear icon-left ion-music-note" ng-click="openModal($index)">
                    {{track.name}}
                </button>                
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

artists.html

<ion-view title="歌手">    
    <ion-content>
        <ion-list>
            <ion-item class="item item-avatar" ng-repeat="artist in artists">
                <img ng-src="{{artist.image}}">
                <h2>{{artist.name}}</h2>
                <div class="item item-body">
                    <button class="button-clear ion-information" ng-click="details($index)">
                        介紹</button>
                    <button class="button-clear ion-music-note" ng-click="tracks($index)">
                        熱門歌曲</button>
                </div>
                <div class="item tabs tabs-icon-left">                    
                    <div class="tab-item"><i class="icon ion-thumbsup"></i>{{artist.popularity}}</div>
                    <div class="tab-item"><i class="ion-social-twitter-outline"></i>{{artist.followers}}</div>                    
                </div>               
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

controllers.js

angular.module('starter.controllers', [])
        .controller('alltrackCtrl', function ($scope, $ionicModal, $filter) {
            $scope.artists = artists;
            $ionicModal.fromTemplateUrl('templates/track-details.html', {
                scope: $scope,
                animation: 'slide-in-up'
            }).then(function (modal) {
                $scope.modal = modal;
            });
            $scope.openModal = function (singerID, index) {
                var result = $scope.artists.filter(function (item) {
                    return (item.id === singerID)
                })
                $scope.artist = result[0];
                $scope.track = $scope.artist.tracks[index];
                $scope.play($scope.track.preview_url);
                $scope.modal.show();
            };
            $scope.closeModal = function () {
                $scope.pause();
                $scope.modal.hide();
            };
            $scope.play = function (url) {
                if (media)
                    media.pause();
                media = new Audio(url);
                media.play();
            };
            $scope.pause = function () {
                if (media)
                    media.pause();
            };
            $scope.$on('$destroy', function () {
                if (media)
                    media.pause();
            });
        })
        .controller('artistsCtrl', function ($scope, $location, singers, MusicPlayer) {
            if (artists.length === 0) {  // 尚未擷取基本資料
                //artists = [];
                angular.forEach(singers, function (value) {
                    var singer = [];
                    singer.name = value;
                    MusicPlayer.basicData(value).then(function (result) {
                        singer.id = result.data.artists.items[0].id;
                        singer.popularity = result.data.artists.items[0].popularity;
                        singer.followers = result.data.artists.items[0].followers['total'];
                        singer.image = result.data.artists.items[0].images[2]['url'];
                        var albums = [];
                        MusicPlayer.getAlbums(singer.id).then(function (result) {
                            angular.forEach(result.data.items, function (value) {
                                var album = [];
                                album.name = value.name;
                                album.id = value.id;
                                album.image = value.images[1]['url'];
                                albums.push(album);
                            })
                        }, function (error) {
                            console.warn(error);
                        });
                        singer.albums = albums;
                        var tracks = [];
                        MusicPlayer.getTracks(singer.id).then(function (result) {
                            angular.forEach(result.data.tracks, function (value) {
                                var track = [];
                                track.name = value.name;
                                track.image = value.album.images[1]['url'];
                                track.popularity = value.popularity;
                                track.preview_url = value.preview_url;
                                tracks.push(track);
                            })
                        }, function (error) {
                            console.warn(error);
                        })
                        singer.tracks = tracks;
                        artists.push(singer);
                    }, function (error) {
                        console.warn(error);
                    })
                })
            }
            $scope.artists = artists;
            $scope.details = function (index) {
                $location.path('/app/artists/' + index);
            };
            $scope.tracks = function (index) {
                $location.path('/app/tracks/' + index);
            };
        })
        .controller('detailCtrl', function ($scope, $stateParams) {
            $scope.artist = artists[$stateParams.id];
        })
        .controller('trackCtrl', function ($scope, $stateParams, $ionicModal) {
            $scope.artist = artists[$stateParams.id];
            $ionicModal.fromTemplateUrl('templates/track-details.html', {
                scope: $scope,
                animation: 'slide-in-up'
            }).then(function (modal) {
                $scope.modal = modal;
            });
            $scope.openModal = function (index) {
                $scope.track = $scope.artist.tracks[index];
                $scope.play($scope.track.preview_url);
                $scope.modal.show();
            };
            $scope.closeModal = function () {
                $scope.pause();
                $scope.modal.hide();
            };
            $scope.play = function (url) {
                if (media)
                    media.pause();
                media = new Audio(url);
                media.play();
            };
            $scope.pause = function () {
                if (media)
                    media.pause();
            };
            $scope.$on('$destroy', function () {
                if (media)
                    media.pause();
                $scope.modal.remove();
            });
        });
var media;
var artists = [];

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/services.js"></script>
    </head>
    <body ng-app="starter">       
    <ion-nav-view>
    </ion-nav-view>
</body>
</html>

services.js

angular.module('starter.services', [])
        .factory('SpotifyWS', function ($http, $q) {
            var self = this;
            self.search = function (method, api) {
                var q = $q.defer();
                switch (method) {
                    case 'GET':
                        $http.get(api).then(function (result) {
                            q.resolve(result);
                        }, function (error) {
                            console.warn(error);
                            q.reject(error);
                        });
                        break;
                }
                return q.promise;
            }
            return this;
        })
        .factory('MusicPlayer', function (SEARCH_API, SpotifyWS) {
            var self = this;

            self.basicData = function (singer) {
                return SpotifyWS.search('GET', SEARCH_API + '?q=' + singer + '&type=artist');
            }
            self.getAlbums = function (singerID) {
                return SpotifyWS.search('GET', 'https://api.spotify.com/v1/artists/' + singerID + '/albums');
            }
            self.getTracks = function (singerID) {
                return SpotifyWS.search('GET', 'https://api.spotify.com/v1/artists/' + singerID + '/top-tracks?country=TW');
            }
            return this;
        })

        .value('singers', ['張惠妹', '江蕙', '周杰倫', '林俊傑'])
        .value('SEARCH_API', "https://api.spotify.com/v1/search")

sidemenu.html

<ion-side-menus>
    <!-- 主要內容 -->
    <ion-side-menu-content>
        <!-- 主要內容標題列 -->
        <ion-nav-bar class="bar-positive">
            <ion-nav-back-button class="button-clear">
                <i class="icon ion-ios7-arrow-back">返回</i>                
            </ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button menu-toggle="left" class="button button-icon ion-navicon">             
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>

        <!-- 主要內容頁面區塊 -->
        <ion-nav-view name="menuContent" animation="slide-left-right">
        </ion-nav-view>
    </ion-side-menu-content>

    <!-- 左側選單 -->
    <ion-side-menu side="left">
        <header>
            Music Player
        </header>
        <ion-content>
            <ion-list>
                <ion-item nav-clear menu-close href="#/app/atrists">
                    歌手
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/tracks">
                    歌曲
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

track-details.html

<ion-modal-view>
    <ion-header-bar>
        <h1 class="title">{{track.name}}</h1>
    </ion-header-bar>
    <ion-content>
        <div class="list card">
            <div class="item item-avatar">
                <img ng-src="{{artist.image}}">
                <h2>{{artist.name}}</h2>
                <p>{{track.name}}</p>
            </div>
            <div class="item item-image">
                <img ng-src="{{track.image}}">
            </div>
            <div class="item tabs">
                <div class="tab-item" ng-click="pause()">
                    <i class="icon ion-ios-pause"></i>
                    暫停
                </div>
                <div class="tab-item" ng-click="closeModal()">
                    <i class="icon ion-android-exit"></i>
                    結束
                </div>
            </div>
        </div>
    </ion-content>
</ion-modal-view>

tracks.html

<ion-view title="試聽歌曲">
    <ion-content>
        <ion-list>
            <div ng-repeat="artist in artists">
                <div class="item item-divider">
                    {{artist.name}}
                </div>
                <ion-item ng-repeat="track in artist.tracks">
                    <button class="button-clear icon-left ion-music-note" 
                            ng-click="openModal(artist.id,$index)">
                        {{track.name}}
                    </button>   
                </ion-item>
            </div>
        </ion-list>        
    </ion-content>
</ion-view>