03 音乐播放器

1、音乐播放器

1、目录结构，rest css

reset css

https://meyerweb.com/eric/tools/css/reset/

2、v-for，@click：点击切换歌曲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
        *{
            padding:0
        }
        ul{
            list-style: none;
        }
        li{
            border-bottom: 1px solid gray;
        }
    </style>
</head>
<body>
    <!-- 1.0 死写法 -->
    <audio src="./audios/1.mp3" autoplay="" controls=""></audio>

    <!-- 2.0 循环指令 -->
    <div id="music">

        <audio :src="currentSong" autoplay="" controls="" ></audio>

        <ul>
            <li v-for="(item,index) in songs" @click='clickHandler(index)'>
                <h3>歌名：{{ item.name }}</h3>
                <p>歌手：{{ item.author }}</p>
            </li>
        </ul>
    </div>

    <script type="text/javascript" src="vue.js"> </script>

    <script>

        var songs = [
            {id:1, src:"./audios/1.mp3", name:"la la la", author:"Rla"},
            {id:2, src:"./audios/2.mp3", name:"kkkk kkk", author:"kkaa"},
            {id:3, src:"./audios/3.mp3", name:"thththt", author:"thth"},
            {id:4, src:"./audios/4.mp3", name:"four four", author:"Four"}
        ]

        var musci = new Vue({
            el: "#music",
            data:{
                songs:songs,
                currentSong:"./audios/1.mp3",
                currentIndex:0
            },
            methods:{
                // 点击，切换下一首歌曲
                clickHandler(index){
                    this.currentSong = this.songs[index].src;
                },

            },
            computed:{

            },
            created(){
                // 通常都用来做页面的初始化
            }
        })
    </script>

</body>
</html>

3、@ended :播放结束，切换下一首

<body>
    <!-- 2.0 循环指令 -->
    <div id="music">

        <audio :src="currentSong" autoplay="" controls="" @ended='nextSong'></audio>

        <ul>
            <li v-for="(item,index) in songs" @click='clickHandler(index)'>
                <h3>歌名：{{ item.name }}</h3>
                <p>歌手：{{ item.author }}</p>
            </li>
        </ul>
    </div>

    <script type="text/javascript" src="vue.js"> </script>

    <script>

        var songs = [
            {id:1, src:"./audios/1.mp3", name:"la la la", author:"Rla"},
            {id:2, src:"./audios/2.mp3", name:"kkkk kkk", author:"kkaa"},
            {id:3, src:"./audios/3.mp3", name:"thththt", author:"thth"},
            {id:4, src:"./audios/4.mp3", name:"four four", author:"Four"}
        ]

        var musci = new Vue({
            el: "#music",
            data:{
                songs:songs,
                currentSong:"./audios/1.mp3",
                currentIndex:0
            },
            methods:{
                // 点击，切换下一首歌曲
                clickHandler(index){
                    this.currentSong = this.songs[index].src;
                },

                // 音频播放完成，切换下一首  方法1
                nextSong(){
                    alert(111)
                    this.currentIndex++;
                    this.currentSong = this.songs[this.currentIndex].src
                }
            },
            computed:{

            },
            created(){
                // 通常都用来做页面的初始化
            }
        })
    </script>

</body>

4、computed:实时监控

<body>
    <!-- 1.0 死写法 -->
    <audio src="./audios/1.mp3" autoplay="" controls=""></audio>

    <!-- 2.0 循环指令 -->
    <div id="music">

        <!-- 方法2 -->
        <audio :src="currSong" autoplay="" controls="" @ended='nextSong'></audio>

        <ul>
            <li v-for="(item,index) in songs" @click='clickHandler(index)'>
                <h3>歌名：{{ item.name }}</h3>
                <p>歌手：{{ item.author }}</p>
            </li>
        </ul>
        <button @click="addOneSong">添加1首歌</button>
    </div>

    <script type="text/javascript" src="vue.js"> </script>

    <script>

        var songs = [
            {id:1, src:"./audios/1.mp3", name:"la la la", author:"Rla"},
            {id:2, src:"./audios/2.mp3", name:"kkkk kkk", author:"kkaa"},
            {id:3, src:"./audios/3.mp3", name:"thththt", author:"thth"},
            {id:4, src:"./audios/4.mp3", name:"four four", author:"Four"}
        ]

        var musci = new Vue({
            el: "#music",
            data:{
                songs:songs,
                currentIndex:0
            },
            methods:{
                // 点击，切换下一首歌曲
                clickHandler(index){
                    this.currentIndex = index;
                },

                // 音频播放完成，切换下一首 
                nextSong(){
                    this.currentIndex++;
                },
                // 添加1首歌
                addOneSong(){
                    this.songs.push({id:5, src:"./audios/5.mp3", name:"qqq", author:"qqq"})
                }
            },
            computed:{
                // 方法2 currsong 实时监听，数组 index
                currSong(){
                    return this.songs[this.currentIndex].src
                }
            },
            created(){
                // 通常都用来做页面的初始化
            }
        })
    </script>

</body>