[Angular实战网易云]——13、底部信息与功能（一）

最新推荐文章于 2022-02-22 15:44:21 发布

虽菜但瘾

最新推荐文章于 2022-02-22 15:44:21 发布

阅读量314

点赞数

分类专栏： Angular网易云文章标签： angular2

本文链接：https://blog.csdn.net/sungoodluck666/article/details/111081826

版权

本文详细介绍了在Angular应用中实现网易云音乐底部信息及功能的步骤，包括歌曲显示、切歌、缓冲条与进度条控制、音量调节和播放模式切换。在歌曲显示部分，使用插值和管道格式化时间。切歌功能通过点击事件触发，并考虑了单曲循环和循环播放。缓冲条和进度条与audio元素交互，音量控制则涉及到音量面板的显隐和音量调整。播放模式提供了随机、单曲循环和循环播放三种选择，模式切换会动态更新DOM样式。

摘要由CSDN通过智能技术生成

场景

在点击播放音乐之后，歌曲的信息也要渲染到DOM中，其中关于歌曲的时长以及播放的时长也要添加上去。在信息渲染之后还要增加底部的功能，上/下一曲，播放/暂停，以及音量调节和播放模式等

步骤

歌曲显示

wy-player.component.ts – 部分

    duration: number; // 总时长
    currentTime: number; // 当前已听时间

  	// 监听当前歌曲
    private watchCurrentSong (song: Song) {
   
        if (song) {
   
            this.currentSong = song;
            // 返回值中的dt为毫秒，处理为秒
            this.duration = song.dt / 1000;
        }

    }
	// 点击播放
    onCanPlay () {
   
        this.play();
    }
	// 更新已播放时长
    onTimeUpdate (e: Event) {
   
        this.currentTime = (<HTMLAudioElement>e.target).currentTime;
    }
	// 播放回调
    private play () {
   
        this.audioEl.play();
    }
	// 取值器-获取当前歌曲的小图标URL
    get picUrl (): string {
   
        return this.currentSong ? this.currentSong.al.picUrl : 'http://s4.music.126.net/style/web2/img/default/default_album.jpg';
    }
}

wy-player.component.html

<div class="m-player">
    <div class="container">
    <div class="wrap">
        <div class="head">
            <img [src]="picUrl" >
            <i class="mask"></i>
        </div>
        <div class="play">
            <div class="words clearfix  " >
                <p class="ellipsis margin-bottom-none">{
  {currentSong?.name}}</p>
                <ul  class="songs clearfix margin-bottom-none ">
                    <li *ngFor="let item of currentSong?.ar; last as isLast">
                        <a>{
  {item.name}}</a>
                        <span [hidden]="isLast">/</span>
                    </li>
                </ul>
            </div>
            <div class="bar">
                <span class="time"> 
                    <em>{
  {currentTime | formatTime}}</em> / {
  {duration |  formatTime}}
                </span>
            </div>
        </div>
    </div>
    </div>
    <audio #audio [src]="currentSong?.url" (canplay)="onCanPlay()" (timeupdate)