import {
Component } from '@angular/core';
import {
HttpClient } from '@angular/
common/
http';
interface
Music {
name:
string;
url:
string;
picurl:
string;
arti
stsname:
string;
}
@
Component({
selector: 'app-
music-player',
templateUrl: './
music-player.
component.
html',
styleUrls: ['./
music-player.
component.scss']
})
export class
MusicPlayer
Component {
currentSong!:
string;
musicLi
st:
Music[] = [];
currentIndex!: number;
con
structor(private
http:
HttpClient) {
this.get
MusicLi
st();
}
play() {
con
st audioElement:
HTMLAudioElement = document.getElementById('audio') as
HTMLAudioElement;
audioElement.play();
}
pause() {
con
st audioElement:
HTMLAudioElement = document.getElementById('audio') as
HTMLAudioElement;
audioElement.pause();
}
next() {
this.currentIndex++;
if (this.currentIndex >= this.
musicLi
st.length) {
this.currentIndex = 0;
}
this.currentSong = this.
musicLi
st[this.currentIndex].url;
con
st audioElement:
HTMLAudioElement = document.getElementById('audio') as
HTMLAudioElement;
audioElement.src = this.currentSong;
audioElement.play();
}
get
MusicLi
st() {
this.
http.get<any>('
https://api.uomg.
com/api/rand.
music?sort=热歌榜&format=json&mid=2642575625').subscribe(
res => {
con
st musicName = res.data.name; // 获取音乐名称
this.
musicLi
st = [{
name:
musicName, // 将音乐名称赋值给name
url: res.data.url,
picurl: res.data.picurl,
arti
stsname: res.data.arti
stsname
}];
this.currentIndex = 0;
this.currentSong = this.
musicLi
st[this.currentIndex].url;
con
st audioElement:
HTMLAudioElement = document.getElementById('audio') as
HTMLAudioElement;
audioElement.src = this.currentSong;
},
error => {
console.log('获取音乐列表失败', error);
}
);
}
}
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
