简单的HTML打字稿mp3播放器

由 发布于

我正在尝试使用打字稿制作一个简单的音频播放器。该播放器将播放存储在编写脚本的文件夹中的歌曲。但是我才刚刚开始理解html，在我看来，我的播放器不起作用，因为在html代码中我写错了。预先感谢您的任何帮助 这是我的html代码：

<html>
    <head>
        <link href="Main.css" rel="stylesheet"/>
        <title> Music Player</title>      
    </head>
<body>
    <script> </script>
    <li>
        <button *ngFor ="let track of playlist" (onclick)='start(track'>
            {{track.name}}
        </button>
    </li>
    <button fill = "clear" (onclick)='prev()'>
    </button>

    <button fill = "clear" (onclick)='togglePlayer(false)' *ngIf = "!isPlaying">
    </button>

    <button fill = "clear" (onclick)='togglePlayer(true)' *ngIf = "isPlaying">
    </button>

    <button fill = "clear" (onclick)='next()'>
    </button>

</body> 
</html>

这是我的ts代码的一部分：

import {Howl} from 'howler';

export interface Track {
    name: string;
    path: string;
}

export class Homepage {
    playlist : Track [] = [
    {name:'hello',
    path: './mp3/track1.mp3'},
    {name:'hello2',
    path: './mp3/track2.mp3'},
    {name:'hello',
    path: './mp3/track3.mp3'}
    ];

    activeTrack: Track=null;
    player: Howl=null;
    isPlaying=false;

    constructor() {}

    start (track: Track) {
        if (this.player) {
            this.player.stop();
        }
        this.player=new Howl ( {
            src: [track.path],
            onplay: ()=> {
                this.isPlaying=true;
                this.activeTrack=track;
            },
            onend: ()=>{
                console.log('oneend');
            }
        });
        this.player.play();
    }

    togglePlayer (pause) {
        this.isPlaying=!pause;
        if (pause) {
            this.player.pause();
        }
        else {
            this.player.play();
        }
    }