使用 MVC 和 AngularJs 创建基于 Web 的音乐播放器系统

syed shanu

4.97/5 (26投票s)

2016年9月1日

CPOL

10分钟阅读

51851

1603

在本文中，我们将学习如何使用 MVC、AngularJS 和 Web API 创建一个简单的基于 Web 的音乐播放器系统。

下载 shanuMusicPlayerMVC.zip - 1.7 MB

引言

点击此处观看视频教程 > 链接到 YouTube 视频。

在本文中，我们将学习如何使用 MVC、AngularJS 和 Web API 创建一个简单的基于 Web 的音乐播放器系统。

什么是 SHANU 音乐播放器？

SHANU 音乐播放器是一个基于 Web 的音乐播放器系统。用户可以上传他们的歌曲并播放选定的专辑。SHANU 音乐播放器有两个模块

1) 播放音乐

2) 专辑/音乐 CRUD（上传和管理歌曲）。

Shanu 音乐播放器：这是主模块；用户可以在此页面播放他们喜欢的已上传音乐。首先，默认情况下，我们将显示带有专辑名称和图片的专辑。用户可以点击他们喜欢的任何专辑来播放音乐。当用户点击专辑图片时，我们默认播放该专辑的第一首歌曲。用户可以向他们的专辑添加任意数量的歌曲来播放。

用户选择专辑后，我们将检查专辑中要添加的歌曲。如果所选专辑没有歌曲，则显示消息“该专辑中未添加任何歌曲”。如果专辑有歌曲，我们将显示我们的 Shanu 音乐播放器。在此页面上，用户可以根据自己的选择更改和播放列表中的任何歌曲。在播放器中，我们将显示专辑图片和标题以及当前播放的歌曲文件名。在列表中，我们还将显示歌手姓名、音乐文件名和文件描述。用户可以播放、暂停、播放下一首和上一首歌曲。

专辑/音乐 CRUD（上传和管理歌曲）

在此模块中，我们将管理专辑和音乐信息。用户可以添加带有图片和歌曲详情的专辑，并将歌曲上传到专辑中。

管理专辑详情

在这里，用户可以添加带有图片的专辑详情。专辑只不过是收藏夹或播放列表。首先，用户可以创建专辑并将他/她所有的喜欢的歌曲添加到该专辑中。在数据库中，我们创建了两个表。一个是 Album 表（作为主表），另一个是 music 表（作为详情表）。

音乐 CRUD

这是我们的主要部分，因为我们将把所有要播放的音乐文件添加到此详细信息表中。在这里，我们从组合框中选择专辑，然后添加音乐详情并将其上传到我们的根目录以播放我们的歌曲。用户可以添加新歌曲、编辑和删除歌曲。我们将在代码部分看到更多细节。

必备组件

Visual Studio 2015：您可以从这里下载。

使用代码

创建数据库和表。

以下是创建数据库、表和示例插入查询的脚本。在您的 SQL Server 中运行此脚本。我使用了 SQL Server 2014。

-- =============================================   
-- Author : Shanu   
-- Create date : 2016-02-28   
-- Description : To Create Database   
  
-- =============================================   
--Script to create DB,Table and sample Insert data   
  
USE MASTER;   
  
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB   
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'musicPlayerDB' )   
BEGIN   
ALTER DATABASE musicPlayerDB SET SINGLE_USER WITH ROLLBACK IMMEDIATE   
DROP DATABASE musicPlayerDB ;   
END   
  
  
CREATE DATABASE musicPlayerDB   
GO   
  
USE musicPlayerDB   
GO   
  
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'AlbumMaster' )   
DROP TABLE AlbumMaster   
GO   
  
CREATE TABLE AlbumMaster   
(   
AlbumID int identity(1,1),   
AlbumName VARCHAR(200) NOT NULL ,   
ImageName VARCHAR(500) NOT NULL   
CONSTRAINT [PK_AlbumMaster] PRIMARY KEY CLUSTERED   
(   
[AlbumID] ASC   
  
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]   
) ON [PRIMARY]   
  
Insert into AlbumMaster(AlbumName,ImageName) Values('RedAlbum','RedAlbum.jpg')  
  
select * from AlbumMaster   
  
  
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'MusicPlayerMaster' )   
DROP TABLE MusicPlayerMaster   
GO   
  
CREATE TABLE MusicPlayerMaster   
(   
MusicID int identity(1,1),   
SingerName VARCHAR(100) NOT NULL ,   
AlbumName VARCHAR(200) NOT NULL ,   
MusicFileName VARCHAR(500) NOT NULL,   
Description VARCHAR(100) NOT NULL,   
  
CONSTRAINT [PK_MusicPlayerMaster] PRIMARY KEY CLUSTERED   
(   
[MusicID] ASC   
  
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]   
) ON [PRIMARY]   
  
select * from MusicPlayerMaster

存储过程： 依次在您的 SQL Server 中运行所有这些过程

SP 用于选择专辑详情的所有记录

USE musicPlayerDB   
GO   
  
-- =============================================   
-- To Select Albumdetails   
-- EXEC USP_AlbumMaster_Select ''   
-- =============================================   
CREATE PROCEDURE [dbo].[USP_AlbumMaster_Select]   
(   
@AlbumName VARCHAR(100) = ''   
)   
AS   
BEGIN   
SELECT AlbumID,AlbumName , ImageName  
FROM AlbumMaster   
WHERE   
AlbumName like @AlbumName +'%'   
Order By AlbumName  
END

SP 用于插入专辑详情。

USE musicPlayerDB   
GO   
  
-- To insert  
-- EXEC [USP_Album_Insert] ''   
-- =============================================   
CREATE PROCEDURE [dbo].[USP_Album_Insert]   
(   
@AlbumName VARCHAR(200) = '',   
@ImageName VARCHAR(500) = ''  
)   
AS   
BEGIN   
IF NOT EXISTS (SELECT * FROM AlbumMaster WHERE AlbumName=@AlbumName)   
BEGIN   
  
INSERT INTO [dbo].AlbumMaster (AlbumName ,ImageName )  
VALUES (@AlbumName ,@ImageName )  
  
Select 'Inserted' as results   
  
END   
ELSE   
BEGIN   
Select 'Exists' as results   
END   
  
END

SP 用于选择音乐详情的所有记录

USE musicPlayerDB   
GO   
-- 1) select all MusicPlayerMaster records   
  
-- Author : Shanu   
-- Create date : 2016-08-23   
-- Description :select top 10 random kidsLearnerMaster records   
-- Tables used : MusicPlayerMaster   
-- Modifier : Shanu   
-- Modify date : 2016-08-23   
-- =============================================   
-- To Select all user roles   
-- EXEC USP_MusicAlbum_SelectALL ''   
-- =============================================   
CREATE PROCEDURE [dbo].[USP_MusicAlbum_SelectALL]   
(   
@AlbumName VARCHAR(100) = ''   
)   
AS   
BEGIN   
SELECT MusicID,   
SingerName ,   
AlbumName ,   
MusicFileName,   
Description   
FROM MusicPlayerMaster   
WHERE   
AlbumName like @AlbumName +'%'   
  
END

SP 用于插入音乐详情

USE musicPlayerDB  
GO   
  
Insert MusicPlayerMaster records   
  
-- Author : Shanu   
-- Create date : 2016-08-23   
-- Description :Insert   
-- Tables used : MusicPlayerMaster   
-- Modifier : Shanu   
-- Modify date : 2016-08-23   
-- =============================================   
-- To insert  
-- EXEC USP_MusicAlbum_Insert ''   
-- =============================================   
CREATE PROCEDURE [dbo].[USP_MusicAlbum_Insert]   
(   
@SingerName VARCHAR(100) = '',   
@AlbumName VARCHAR(200) = '',   
@MusicFileName VARCHAR(500) = '',   
@Description VARCHAR(100) = ''  
)   
AS   
BEGIN   
IF NOT EXISTS (SELECT * FROM MusicPlayerMaster WHERE MusicFileName=@MusicFileName)   
BEGIN   
  
INSERT INTO [dbo].[MusicPlayerMaster]  
(SingerName ,AlbumName ,MusicFileName ,Description)  
VALUES  
(@SingerName ,@AlbumName ,@MusicFileName ,@Description)  
  
Select 'Inserted' as results   
  
END   
ELSE   
BEGIN   
Select 'Exists' as results   
END   
  
END

SP 用于更新音乐详情

USE musicPlayerDB   
GO   
Update all MusicPlayerMaster records   
  
-- Author : Shanu   
-- Create date : 2016-08-23   
-- Description :Update   
-- Tables used : MusicPlayerMaster   
-- Modifier : Shanu   
-- Modify date : 2016-08-23   
-- =============================================   
-- To Select all user roles   
-- EXEC USP_MusicAlbum_Update ''   
-- =============================================   
Create PROCEDURE [dbo].[USP_MusicAlbum_Update]   
(   
@musicID VARCHAR(20) = '',   
@SingerName VARCHAR(100) = '',   
@AlbumName VARCHAR(200) = '',   
@MusicFileName VARCHAR(500) = '',   
@Description VARCHAR(100) = ''  
)   
AS   
BEGIN   
UPDATE [dbo].[MusicPlayerMaster]  
SET [SingerName] = @SingerName,  
[AlbumName] = @AlbumName,  
[MusicFileName] = @MusicFileName,  
[Description] = @Description   
WHERE   
musicID = @musicID   
Select 'Updated' as results   
END

SP 用于按管理员删除记录

-- =============================================    
-- To delete MusicAlbum record  
-- =============================================                                                            
Create PROCEDURE [dbo].[USP_MusicAlbum_Delete]                                                
   ( @musicID       VARCHAR(20)     = '' )                                                          
AS                                                                  
BEGIN         
        DELETE FROM MusicPlayerMaster WHERE musicID=@musicID                   
              
END

在 Visual Studio 2015 中创建您的 MVC Web 应用程序

安装 Visual Studio 2015 后，点击开始 >> 程序 >> 选择 Visual Studio 2015 >> 点击 Visual Studio 2015。点击新建 >> 项目 >> 选择 Web >> ASP.NET Web 应用程序。输入您的项目名称并点击确定。

选择 MVC、WEB API 并点击确定。

Web.Config：用于上传大文件大小

注意：在这里，我们需要上传 mp3 或 wav 格式的音乐文件。因此，我们需要将大文件上传到我们的根目录。为了在 webconfig 中上传大文件，我们添加了以下代码部分，

<system.web>  
<httpRuntime   executionTimeout="3600" maxRequestLength="102400" />   
  </system.web>  
  
<system.webServer>  
<security>  
        <requestFiltering>  
            <requestLimits maxAllowedContentLength="104857600" />  
        </requestFiltering>  
    </security>  
  </system.webServer>

使用 ADO.NET 实体数据模型添加数据库

右键单击项目，然后点击添加，然后点击新建项。选择数据，然后选择 ADO.NET 实体数据模型，并为您的 EF 命名，然后点击添加。

选择“EF Designer from database”并点击下一步。

连接到您的数据库。点击 下一步 选择菜单管理的表和存储过程。

现在，选择所有表和存储过程详情，然后点击完成。

添加 Web API 控制器的过程

右键单击 Controllers 文件夹。点击添加，然后点击 Controller。

选择 Web API 2 Controller – Empty，点击添加，并为您的 Web API 控制器命名。

使用 WEBAPI 控制器进行 CRUD

选择 Controller 并添加一个空的 Web API 2 Controller。为您的 Web API 控制器命名，然后点击确定。在这里，我们为我们的 Web API 控制器命名为“MusicAPIController”。

由于我们创建了 Web API 控制器，我们可以看到我们的控制器已从 ApiController 继承。正如我们所知，Web API 是构建浏览器和移动设备 HTTP 服务的简单方法。

Web API 具有以下四种方法：Get/Post/Put 和 Delete，其中

Get 用于请求数据。（Select）
Post 用于创建数据。（Insert）
Put 用于更新数据。
Delete 用于删除数据。

Get 方法

在我们的示例中，我只使用了一个 Get 方法，因为我只使用了一个存储过程。我们需要为我们的实体创建一个对象，并编写我们的 Get 方法来执行 Select/Insert/Update 和 Delete 操作。

查询操作

我们使用 Get 方法通过实体对象获取 AlbumMaster 和 MusicDetail 表的所有详细信息，并将结果作为 IEnumerable 返回。我们在 AngularJS 中使用此方法，并在 AngularJS 控制器中将其显示在 MVC 页面上。使用 Ng-Repeat，我们可以绑定详细信息。

在这里，我们可以在 getAlbums 方法中看到，我将搜索参数传递给了 USP_AlbumMaster_Select ALL 存储过程。在存储过程中，如果搜索参数为空，我使用“%”来返回所有记录。

// To select Album Details  
       [HttpGet]  
       public IEnumerable<USP_AlbumMaster_Select_Result> getAlbums(string AlbumName)  
       {  
           if (AlbumName == null)  
               AlbumName = "";  
           return objapi.USP_AlbumMaster_Select(AlbumName).AsEnumerable();  
       }

插入操作
与 Select 相同，我们将所有参数传递给了 Insert 过程。此 Insert 方法将从数据库返回记录是否已插入的结果。我们将获取结果并从 AngularJS Controller 显示到 MVC 应用程序。

[HttpGet]  
        public IEnumerable<string> insertAlbum(string AlbumName, string ImageName)  
        {  
            if (AlbumName == null)  
                AlbumName = "";  
  
            if (ImageName == null)  
                ImageName = "";  
  
            return objapi.USP_Album_Insert(AlbumName, ImageName).AsEnumerable();  
  
        }

与 Album 相同，我们将使用 Music Details 的方法来执行我们的 CRUD 操作，这是 Select、Insert、Update 和 Delete 的代码。

// to Search all Music Album Details  
[HttpGet]  
public IEnumerable<USP_MusicAlbum_SelectALL_Result> getMusicSelectALL(string AlbumName)  
{  
    if (AlbumName == null)  
        AlbumName = "";  
  
    return objapi.USP_MusicAlbum_SelectALL(AlbumName).AsEnumerable();  
}  
  
// To insert Music Details  
[HttpGet]  
public IEnumerable<string> insertMusic(string SingerName, string AlbumName, string MusicFileName, string Description)  
{  
    if (SingerName == null)  
        SingerName = "";  
  
    if (MusicFileName == null)  
        MusicFileName = "";  
  
    if (AlbumName == null)  
        AlbumName = "";  
  
    if (Description == null)  
        Description = "";  
  
    return objapi.USP_MusicAlbum_Insert(SingerName, AlbumName, MusicFileName, Description).AsEnumerable();  
  
}  
  
// To Update Music Details  
[HttpGet]  
public IEnumerable<string> updateMusic(string musicID, string SingerName, string AlbumName, string MusicFileName, string Description)  
{  
    if (musicID == null)  
        musicID = "0";  
  
    if (SingerName == null)  
        SingerName = "";  
  
    if (MusicFileName == null)  
        MusicFileName = "";  
  
    if (AlbumName == null)  
        AlbumName = "";  
  
    if (Description == null)  
        Description = "";  
  
    return objapi.USP_MusicAlbum_Update(musicID, SingerName, AlbumName, MusicFileName, Description).AsEnumerable();  
  
}  
  
// To Delete Music Details  
[HttpGet]  
public IEnumerable<string> deleteMusic(string musicID)  
{  
    if (musicID == null)  
        musicID = "0";  
    return objapi.USP_MusicAlbum_Delete(musicID).AsEnumerable();  
  
}

接下来，我们将创建我们的 AngularJs Controller 和 View 页面来执行我们的 CRUD 操作以管理 Albums 和 MusicDetails。

专辑/音乐 CRUD（上传和管理歌曲）

创建 AngularJS Controller

首先，在 Scripts 文件夹中创建一个名为“MyAngular”的文件夹。

现在，将您的 Angular Controller 添加到文件夹中。

右键单击 MyAngular 文件夹，点击添加，然后点击新建项。选择 Web，然后选择 AngularJS Controller，并为 Controller 命名。我将我的 AngularJS Controller 命名为“Controller.js”。

AngularJS Controller 创建后，我们可以看到默认情况下 Controller 将包含具有默认模块定义的代码等。

如果缺少 AngularJS 包，请将该包添加到您的项目中。右键单击您的 MVC 项目，然后点击管理 NuGet 程序包。搜索 AngularJS 并点击安装。

创建 AngularJS 脚本文件的过程

Modules.js： 在这里，我们将添加对 AngularJS JavaScript 的引用，并创建一个名为“AngularJs_Module”的 Angular 模块。

// <reference path="../angular.js" />    
/// <reference path="../angular.min.js" />     
/// <reference path="../angular-animate.js" />     
/// <reference path="../angular-animate.min.js" />     
var app;  
(function () {  
    app = angular.module("AngularJs_Module", ['ngAnimate']);  
})();

Controllers： 在 AngularJS Controller 中，我完成了所有的业务逻辑，并将数据从 Web API 返回到我们的 MVC HTML 页面。

变量声明

首先，我们声明了所有需要的局部变量。

app.controller("AngularJs_Controller", function ($scope, $timeout, $rootScope, $window, $http , FileUploadService) {  
    $scope.date = new Date();  
    $scope.MyName = "shanu";  
    // For Album Details  
    $scope.AlbumIdentitys = 0;  
    $scope.UImage = "";  
    $scope.AlbumName = "";  
  
    // For Music Details  
    $scope.musicID = 0;  
    $scope.SingerName = "";  
    $scope.AlbumNameS = "RedAlbum";  
    $scope.MusicFileName = "";  
    $scope.Description = "";  
  
    //For Visible design  
  
    $scope.showMusicsAdd = false;  
    $scope.showAlbum = true;  
    $scope.showMusics = false;  
    $scope.showEditMusics = false;

Select 方法
在 Select 方法中，我们使用 $http.get 从 Web API 获取 Album 和 Music Details 的详细信息。在 get 方法中，我们将提供我们的 API Controller 名称和方法来获取详细信息。
最终结果将使用 data-ng-repeat 显示到 MVC HTML 页面。

// This method is to get all the kids Learn Details to display for CRUD.   
    selectAlbumDetails($scope.AlbumName);  
  
    function selectAlbumDetails(AlbumName) {  
        $http.get('/api/MusicAPI/getAlbums/', { params: { AlbumName: AlbumName } }).success(function (data) {  
            $scope.AlbumData = data;  
            
            if ($scope.AlbumData.length > 0) {  
            }  
        })  
   .error(function () {  
       $scope.error = "An Error has occured while loading posts!";  
   });  
  
        $http.get('/api/MusicAPI/getMusicSelectALL/', { params: { AlbumName: AlbumName } }).success(function (data) {  
            $scope.MusicData = data;  
  
            if ($scope.AlbumData.length > 0) {  
            }  
        })  
  .error(function () {  
      $scope.error = "An Error has occured while loading posts!";  
  });  
    }

插入专辑
对于添加专辑，我们还将专辑图片上传到我们的根目录。

注意： 首先，从您的解决方案创建一个名为“uploads”的文件夹，用于上传所有专辑图片和 mp3 等音乐文件。

$scope.ChechFileValid

此方法检查附加的图片文件是否有效。如果图片文件无效，则显示错误消息。

$scope.SaveAlbum = function ()

在此方法中，将图片文件传递给 UploadFile 方法，一旦图片成功上传到我们的根文件夹，专辑详情将插入数据库。

fac.UploadFile = function (file) 在此方法中，使用 $http.post，我们将图片文件传递给 MVC Controller，并传递我们的 HTTPost 方法，如下所示：

//Form Validation  
    $scope.$watch("f1.$valid", function (isValid) {  
        $scope.IsFormValid = isValid;  
    });  
  
    //File Validation  
    $scope.ChechFileValid = function (file) {  
        var isValid = false;  
        if ($scope.SelectedFileForUpload != null) {  
            if ((file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') && file.size <= (800 * 800)) {  
                $scope.FileInvalidMessage = "";  
                isValid = true;  
            }  
            else {  
                $scope.FileInvalidMessage = "Only JPEG/PNG/Gif Image can be upload )";  
            }  
        }  
        else {  
            $scope.FileInvalidMessage = "Image required!";  
        }  
        $scope.IsFileValid = isValid;  
    };  
  
    //File Select event   
    $scope.selectFileforUpload = function (file) {  
  
        var files = file[0];  
        $scope.Imagename = files.name;  
        //    alert($scope.Imagename);  
        $scope.SelectedFileForUpload = file[0];  
  
    }  
  
    //Save Album File  
    $scope.saveAlbum = function () {  
        $scope.IsFormSubmitted = true;  
  
        $scope.Message = "";  
        $scope.ChechFileValid($scope.SelectedFileForUpload);  
  
        if ($scope.IsFormValid && $scope.IsFileValid) {  
            FileUploadService.UploadFile($scope.SelectedFileForUpload).then(function (d) {  
  
                $http.get('/api/MusicAPI/insertAlbum/', { params: { AlbumName: $scope.AlbumName, ImageName: $scope.Imagename } }).success(function (data) {  
                    $scope.menuInserted = data;  
                    alert($scope.menuInserted);  
                    cleardetails();  
                    selectAlbumDetails('');  
                })  
         .error(function () {  
             $scope.error = "An Error has occured while loading posts!";  
         });  
  
            }, function (e) {  
                alert(e);  
            });  
        }  
        else {  
            $scope.Message = "All the fields are required.";  
        }  
  
    };  
  
  
.factory('FileUploadService', function ($http, $q) {  
    
    var fac = {};  
    fac.UploadFile = function (file) {  
        var formData = new FormData();  
        formData.append("file", file);  
  
        var defer = $q.defer();  
        $http.post("/KidslearnAdmin/UploadFile", formData,  
            {  
                withCredentials: true,  
                headers: { 'Content-Type': undefined },  
                transformRequest: angular.identity  
            })  
        .success(function (d) {  
            defer.resolve(d);  
        })  
        .error(function () {  
            defer.reject("File Upload Failed!");  
        });  
  
        return defer.promise;  
  
    }  
    return fac;

此保存部分解释了如何使用 AngularJS Controller 将我们的专辑详情保存到数据库。同样，我们将保存并将音乐文件上传到我们的根目录以播放我们的音乐。

这是 AngularJS Controller 代码部分，用于执行我们的 Music Details CRUD 操作并将音乐文件上传到我们的根文件夹。

// ********   Music CRUD Management and MP3 File Upload    
          
    //Form Validation  
    $scope.$watch("f2.$valid", function (isValid) {  
        $scope.IsFormValid = isValid;  
    });  
  
    // THIS IS REQUIRED AS File Control is not supported 2 way binding features of Angular  
    // ------------------------------------------------------------------------------------    
  
    //File Validation  
    $scope.ChechMusicFileValid = function (file) {  
        var isValid = false;  
        if ($scope.selectmp3FileforUpload != null) {  
            $scope.FileInvalidMessage = "";  
            isValid = true;  
        }  
        else {  
            $scope.FileInvalidMessage = "Music File required!";  
        }  
        $scope.IsFileValid = isValid;  
    };  
  
    //to upload Music File  
  
    //File Select event   
    $scope.selectmp3FileforUpload = function (file) {          
        var files = file[0];         
        $scope.MusicFileName = files.name;  
        //    alert($scope.Imagename);  
        $scope.selectmp3FileforUpload = file[0];    
    }    
  
    //Save Music  File  
    $scope.saveMusicDetails = function () {  
          
        $scope.IsFormSubmitted = true;  
  
        $scope.Message = "";             
  
        $scope.ChechMusicFileValid($scope.selectmp3FileforUpload);            
  
        if ($scope.IsFormValid && $scope.IsFileValid) {  
            
            FileUploadService.UploadFile($scope.selectmp3FileforUpload).then(function (d) {  
                 
                //if the Music ID=0 means its new Music insert here i will call the Web api insert method  
                if ($scope.musicID == 0) {  
  
                    $http.get('/api/MusicAPI/insertMusic/', { params: { SingerName: $scope.SingerName, AlbumName: $scope.AlbumNameS, MusicFileName: $scope.MusicFileName, Description: $scope.Description } }).success(function (data) {  
  
                        $scope.menuInserted = data;  
                        alert($scope.menuInserted);   
  
                        cleardetails();  
                        selectAlbumDetails('');  
                    })  
             .error(function () {  
                 $scope.error = "An Error has occured while loading posts!";  
             });  
                }  
  
  
                else {  // to update to the Music details  
                    $http.get('/api/MusicAPI/updateMusic/', { params: { musicID: $scope.musicID, SingerName: $scope.SingerName, AlbumName: $scope.AlbumNameS, MusicFileName: $scope.MusicFileName, Description: $scope.Description } }).success(function (data) {  
                        $scope.menuUpdated = data;  
                        alert($scope.menuUpdated);  
  
                        cleardetails();  
                        selectAlbumDetails('');  
                    })  
            .error(function () {  
                $scope.error = "An Error has occured while loading posts!";  
            });  
                }  
  
            }, function (e) {  
                alert(e);  
            });  
        }  
        else {  
            $scope.Message = "All the fields are required.";  
        }  
  
    };  
  
    //Edit MusicEdit  Details  
    $scope.MusicEdit = function KidsEdit(musicID, SingerName, AlbumName, MusicFileName, Description) {  
        cleardetails();  
        $scope.showEditMusics = true;  
        alert(musicID);  
        $scope.musicID = musicID;  
        $scope.SingerName = SingerName;  
        $scope.AlbumNameS = AlbumName;  
        $scope.MusicFileName = MusicFileName;  
        $scope.Description = Description;  
    }  
  
    //Delete MusicDelete Detail  
    $scope.MusicDelete = function KidsDelete(musicIDs) {  
        cleardetails();  
        $scope.showEditMusics = true;  
        $scope.musicID = musicIDs;  
        var delConfirm = confirm("Are you sure you want to delete the Kids Lear Detail ?");  
        if (delConfirm == true) {  
  
            $http.get('/api/MusicAPI/deleteMusic/', { params: { musicID: $scope.musicID } }).success(function (data) {  
                alert("Music Detail Deleted Successfully!!");  
                cleardetails();  
                selectAlbumDetails('');  
            })  
      .error(function () {  
          $scope.error = "An Error has occured while loading posts!";  
      });  
  
        }  
    }

音乐播放器模块

这是我们的主模块，用户可以在此页面播放他/她喜欢的歌曲。首先，我们将在主页上显示所有专辑详情和图片。

在这里，我们创建了另一个 AngularJS Controller 并将其命名为 HomeController。在此控制器中，我们将获取专辑和音乐的详细信息以播放我们的歌曲。

专辑显示： 首先，我们创建一个新的 AngularJS controller 并声明所有变量。在主页上，我们显示所有专辑详情、图片和专辑标题。默认情况下，我们调用 selectAlbumDetails() 方法来在主页上显示专辑详情。

// <reference path="../angular.js" />    
/// <reference path="../angular.min.js" />     
/// <reference path="../angular-animate.js" />     
/// <reference path="../angular-animate.min.js" />     
var app;  
(function () {  
    app = angular.module("AngularJsHome_Module", ['ngAnimate']);  
})();    
  
app.controller("AngularJsHome_Controller", function ($scope, $timeout, $rootScope, $window, $http) {  
    $scope.date = new Date();  
    $scope.MyName = "shanu";  
    // For Album Details  
    $scope.AlbumIdentitys = 0;  
    $scope.AlbumImage = "RedAlbum.jpg";  
    $scope.AlbumName = "RedAlbu";  
  
    // For Music Details  
    $scope.musicID = 0;  
    $scope.SingerName = "";  
    $scope.AlbumNameS = "RedAlbum";  
    $scope.MusicFileName = "";  
    $scope.Description = "";  
  
    // Play Songs  
    $scope.selectedSongIndex = 0;  
    $scope.songsCount = 0;  
    $scope.CurrentSong = "Alarm06NOK.wav";  
    $scope.selectedSongstoPlay = "/uploads/Alarm06NOK.wav";  
    //For Visible design  
   
    $scope.showAlbum = true;  
    $scope.showMusics = false;  
    $scope.showButton = false;  
    $scope.showSounds = false;  
    
    // This method is to get all the kids Learn Details to display for CRUD.   
    selectAlbumDetails('');  
  
    function selectAlbumDetails(AlbumName) {  
        $http.get('/api/MusicAPI/getAlbums/', { params: { AlbumName: AlbumName } }).success(function (data) {  
            $scope.AlbumData = data;  
  
            if ($scope.AlbumData.length > 0) {  
            }  
        })  
   .error(function () {  
       $scope.error = "An Error has occured while loading posts!";  
   });  
  
        
    }

在主页上，我们每行只显示 3 个专辑详情。要固定 3 列，首先在主页的 Index View 页面，我们添加此 CSS 样式。在 html 部分，我们在 div 标签中使用此样式来每行显示 3 列。

<div class="columns">  
                            <div ng-repeat="details in AlbumData">  
                                <table style='width: 99%;table-layout:fixed;'>  
                                    <tr>  
                                        <td align="center">  
                                            <img src="~/uploads/{{details.ImageName}}" alt="{{details.ImageName}}" width="144px" height="144px" ng-click="showMusicAlbum(details.AlbumName, details.ImageName)" />  
                                        </td>  
                                    </tr>  
                                    <tr>  
                                        <td align="center">  
                                            <span style="color:#257815;font-size:large"><b>{{details.AlbumName}}</b></span>  
  
                                        </td>  
                                    </tr>  
                                    <tr>  
                                        <td>  
  
                                            <img src="~/Images/blank.gif" alt="" width="1" height="2" />  
                                        </td>  
                                    </tr>  
                                </table>  
                            </div>  
                        </div>

音乐播放器

在音乐播放器部分，首先我们在 html 部分声明 audio 标签。在 audio 标签中，我们从 AngularJS controller 部分获取源音频文件。

<audio id="audioPlay">  
  <source  src="{{selectedSongstoPlay}}"></source>  
 </audio>

播放歌曲

要播放歌曲，首先我们将加载所选专辑的所有歌曲。在此方法中，我们将选定的专辑传递给我们的 Web API 以加载所有歌曲。如果专辑没有记录，我们将显示消息（“该专辑中未添加任何歌曲”。如果专辑有歌曲，我们将选择第一条歌曲记录并将歌曲名称传递给 playMusic 方法。

var audio = document.getElementById("audioPlay");  
    //Show Music   Details  
    $scope.showMusicAlbum = function showMusicAlbum(AlbumNames, ImageName) {  
  
        $scope.AlbumName = AlbumNames;  
        $scope.AlbumImage = ImageName;  
           
        // Get the Music Play list by Albums  
        $http.get('/api/MusicAPI/getMusicSelectALL/', { params: { AlbumName: $scope.AlbumName } }).success(function (data) {  
            $scope.MusicData = data;  
             
            if ($scope.MusicData.length > 0) {  
                $scope.showAlbum = false;  
                $scope.showMusics = true;  
                $scope.showButton = true;  
                $scope.songsCount=$scope.MusicData.length;  
                $scope.selectedSongIndex = 0;  
                $scope.CurrentSong = $scope.MusicData[$scope.selectedSongIndex].MusicFileName;  
                $scope.playMusic($scope.selectedSongIndex, $scope.CurrentSong);  
            }  
            else  
            {  
                alert("No Songs has been added in this Album")  
                $scope.songsCount = 0;  
                $scope.selectedSongIndex = 0;  
            }  
             
        })  
.error(function () {  
    $scope.error = "An Error has occured while loading posts!";  
});  
    }

在 playMusic 中，我们获取音乐文件名并播放当前选定的歌曲。

//Play Songs  
    $scope.playMusic = function (indexnumber, musicFileName) {  
        $scope.selectedSongIndex = indexnumber;  
        $scope.CurrentSong = musicFileName;  
    $scope.selectedSongstoPlay = "/uploads/" + musicFileName;       
    
        audio.load();  
        audio.play();  
  
        audio.addEventListener('ended', function () {  
            if ($scope.selectedSongIndex < $scope.songsCount) {  
                $scope.selectedSongIndex = $scope.selectedSongIndex + 1;  
            }  
            else {  
                $scope.selectedSongIndex = 0;  
            }  
  
            $scope.CurrentSong = $scope.MusicData[$scope.selectedSongIndex].MusicFileName;  
            $scope.selectedSongstoPlay = "/uploads/" + musicFileName;  
  
            audio.load();  
            audio.play();  
             
        });  
    }

播放下一首歌曲

在 Next 图片点击时，我们调用 nextSong 方法。在此方法中，我们检查并递增选定的歌曲索引以播放下一首歌曲。我们将歌曲名称传递给 playMusic 方法来播放歌曲。

//next Song Play  
    $scope.nextSong = function () {  
        if ($scope.selectedSongIndex < $scope.songsCount) {  
            $scope.selectedSongIndex = $scope.selectedSongIndex + 1;  
        }  
        else {  
            $scope.selectedSongIndex = 0;  
        }  
  
        $scope.CurrentSong = $scope.MusicData[$scope.selectedSongIndex].MusicFileName;  
        $scope.playMusic($scope.selectedSongIndex, $scope.CurrentSong);  
    }

播放上一首歌曲

在 Previous 图片点击时，我们调用 previousSong 方法。在此方法中，我们检查并递减选定的歌曲索引以播放上一首歌曲。我们将歌曲名称传递给 playMusic 方法来播放歌曲。

//Previous Song Play  
    $scope.previousSong = function ()  
    {  
        if($scope.selectedSongIndex>0)  
        {  
            $scope.selectedSongIndex = $scope.selectedSongIndex - 1;  
        }  
        else  
        {  
            $scope.selectedSongIndex = 0;  
        }  
  
        $scope.CurrentSong = $scope.MusicData[$scope.selectedSongIndex].MusicFileName;  
        $scope.playMusic($scope.selectedSongIndex, $scope.CurrentSong);  
    }

暂停当前歌曲
在 Stop 图片点击时，我们调用 pauseMusic 方法。在此方法中，我们暂停当前正在播放的歌曲。

//Pause Songs  
   $scope.pauseMusic = function () {  
       audio.pause();  
   }

播放当前歌曲
在 Play 图片点击时，我们调用 playCurrent 方法。在此方法中，我们继续播放暂停的歌曲。

//play Current Songs  
    $scope.playCurrent = function () {        
        audio.play();  
    }

关注点

希望大家喜欢这个 Shanu 音乐播放器基于 Web 的系统。这是一个使用 MVC 和 AngularJS 开发的简单基于 Web 的音乐系统。此应用程序可以根据您的要求进行扩展，添加更多功能，如最近播放的歌曲和最常播放的歌曲等。

使用 MVC 和 AngularJs 创建基于 Web 的音乐播放器系统

引言

使用代码

关注点

历史