Angualr 2 利用Service实现音乐播放器

Angualr 2 利用Service实现音乐播放器
最终成果：

参考了https://www.jb51.net/article/106598.htm 这篇博客，优化了样式，增加了改变音乐播放模式的功能，优化添加音乐的方法，关于service的详细代码可以看参考的那篇博客。
一、使用步骤
1.在本地新建一个文件夹，命名和码云上的项目名一致
2.打开git bash，和上传相似，利用cd命令打开新建的文件夹的根目录，如E:\webroot\test 3.git clone …(把码云的项目路径复制下来) 等待成功，就可以在本地文件夹看到下载下来的代码了。
3.如果想音乐播放器放到自己的项目里，参考以下两个步骤
3.1把这几个文件夹放到自己的项目对应的文件夹里面
​​
3.2.在app.module.ts里面引入使用serveice的组件、pipe以及serveice

二、部分代码分析
①新增一个通过传入数组添加歌曲的方法，原博客的代码只有传入一首歌曲添加到播放列表的方法，因为开发的APP播放全部歌曲的更能，所以新增上一个传入数组的方法，在初始化歌曲列表的时候也比较方便

/**
     * 添加单首歌曲到列表
     * 若列表中无此音频则添加到列表的最后
     * 若列表中无音频则添加后并播放
     * @param audio
     */
    public Add(audio: Audio): void {
        this.playList.push(audio);
        if (this.playList.length === 1) {
            this.PlayIndex(0);
        }
    }
    /**
     * 新增的方法
     * 通过传入数组添加歌曲
     * 若列表中无音频则添加后并播放
     * @param audio
     */
    public AddArray(arr): void{
        this.playList = arr.map((item)=>{
            return item;
        })
        if (this.playList.length > 0) {
            this.PlayIndex(0);
        }
    }

②歌曲播放模式
由于原博客的代码播放完下一首之后不能自动播放下一首，因此在音乐结束后，调用Next（）方法自动播放下一首

③音乐播放时及播放结束后的方法
④service中的Next（）方法
因为播放完下一首之后自动调用Next（）方法，因此在Next（）方法里面做播放模式的判断，根据不同的播放模式，调用PlayIndex（）方法，播放指定的index的歌曲

// /**
    //  * 下一曲
    // type: auto(自动切换下一首) | man（手动切换下一首）-->用来控制循环播放的切换下一首歌
    //  */
    public Next(type): void {
        switch (this.playData.Style) {
            case 0: // 循环播放
                if(this.playData.Index == this.playList.length - 1){  // 播放完列表最后一首时，下一首播放列表的第一首歌曲
                    this.playData.Index = 0;
                    this.PlayIndex(this.playData.Index);
                }else if(this.playData.Index < this.playList.length){
                    this.playData.Index++;
                    this.PlayIndex(this.playData.Index);
                }
                break;
            case 1: // 随机播放,这个随机播放会因为歌曲列表较小而出现点好几次下一首播放同一首的情况，暂时没想到怎么解决，欢迎指正~~~
                const preIndex = this.playData.Index;
                this.playData.Index = Math.ceil((Math.random() * this.playList.length)); 
                if (preIndex == this.playData.Index){
                    this.playData.Index = this.playData.Index - 1;
                }
                this.PlayIndex(this.playData.Index);
                break;
            case 2:
             // 单曲循环,若用户在单曲循环时，手动切换到下一首（通过传进来的参数判断，man是手动切换，auto是自动播放下一首），则让playData.Index加1，否则继续播放当前歌曲
                this._audio.currentTime = 0;
                if(type != 'auto'){
                    this.playData.Index = this.playData.Index + 1
                    if(this.playData.Index == this.playList.length){
                        this.playData.Index = 0
                    }
                    this.PlayIndex(this.playData.Index);
                }else{
                    this.PlayIndex(this.playData.Index);
                }
                break;
            default:
                if (this.playData.Index < this.playList.length) {
                    this.playData.Index++;
                    this.PlayIndex(this.playData.Index);
                }
                break;
        }
    }

⑤Prev（）播放上一首方法亦如此

/**
     * 上一曲
     * // type: man（手动切换上一首）-->用来控制循环播放的切换上一首歌
     */
    public Prev(type): void {
        switch (this.playData.Style) {
            case 0:
                if(this.playData.Index == 0){
                    this.playData.Index = this.playList.length - 1;
                    this.PlayIndex(this.playData.Index);
                }else if(this.playData.Index > 0){
                    this.playData.Index--;
                    this.PlayIndex(this.playData.Index);
                }
                break;
            case 1:
                const preIndex = this.playData.Index;
                this.playData.Index = Math.floor(Math.random() * this.playList.length);
                if (preIndex == this.playData.Index){
                    this.playData.Index = this.playData.Index - 1;
                }
                this.PlayIndex(this.playData.Index);
                break;
            case 2:
                this._audio.currentTime = 0;
                if(type == 'man'){
                    this.playData.Index = this.playData.Index - 1;
                    if(this.playData.Index < 0){
                        this.playData.Index = this.playList.length - 1;
                        this.PlayIndex(this.playData.Index);
                    }else{
                        this.PlayIndex(this.playData.Index);
                    }
                }
                break;
            default:
                if (this.playData.Index > 0) {
                    this.playData.Index--;
                    this.PlayIndex(this.playData.Index);
                }
                break;
        }
    }

⑥改变播放模式

// 改变播放模式
    public ChangeMode(mode: number):void{
        this.playData.Style = mode;
        console.log('ModeChange')
    }

⑦各个文件之间的功能及关系
audio.-studio组件调用audio.service

⑧audio.-studio组件分析



完整项目下载地址：https://gitee.com/peaYing/musicPlayer.git