vue小练习--音乐播放器

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1 首先建一个文件夹 放几首歌曲

2 看代码

1）基本版本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        ul li {
            margin: 20px 20px;
            padding: 10px 5px;
            border-radius: 3px;
        }
        ul li.active {
            background-color: gray;
        }
    </style>
</head>
<body>
<div id="app">

　　　　　　　　<!--handerEnded这首歌播放完就波下一曲-->

    <audio v-bind:src="currentSrc" controls autoplay @ended="handerEnded"></audio>
    <ul>
        <li :class="{active:index===currentIndex}" v-for="(item, index) in musicData" :key="item.id"
            @click="handerClick(item.songSrc,index)">
            <h2>{{item.id}}-歌名：{{item.name}}</h2>
            <p>{{item.author}}</p>
        </li>
    </ul>
    <button @click="nextSong">下一曲</button>
</div>
<script>
    const musicData = [{
        id: 1,
        name: '数到五答应我 - 曹格',
        author: '曹格',
        songSrc: './static/数到五答应我 - 曹格.mp3'
    },
        {
            id: 2,
            name: '风吹着我向你跑来 - 焦迈奇',
            author: '焦迈奇',
            songSrc: './static/风吹着我向你跑来 - 焦迈奇.mp3'
        }
    ];
    let app = new Vue({
        el: '#app',
        data: {
            musicData: musicData,   // 可以写成 因为是一样的 musicData
            currentSrc: './static/数到五答应我 - 曹格.mp3',
            currentIndex: 0
        },
        methods: {
            handerClick(src, index) {
                // 更改src意味着 currentSrc = 你点的那个li标签里的歌曲的src
                // 可以把songcrc传进去
                this.currentSrc = src;
                this.currentIndex = index
            },
            handerEnded() {
                // 下一曲的播放 要用 ended
                // 1. 索引 + 1
//                this.currentIndex++;
//                // 2. 找到索引的src赋值给原来的src
//                if (this.currentIndex === this.musicData.length) {
//                    this.currentIndex = 0
//                }
//                this.currentSrc = this.musicData[this.currentIndex].songSrc;
                this.nextSong();
            },
            nextSong(){
                this.currentIndex++;
                // 2. 找到索引的src赋值给原来的src
                if (this.currentIndex === this.musicData.length) {
                    this.currentIndex = 0
                }
                this.currentSrc = this.musicData[this.currentIndex].songSrc;
            }
        }
    });
</script>
</body>
</html>

 2）计算属性版本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        ul li {
            margin: 20px 20px;
            padding: 10px 5px;
            border-radius: 3px;
        }
        ul li.active {
            background-color: gray;
        }
    </style>
</head>
<body>
<div id="app">
    <audio v-bind:src="getCurrentSongSrc" controls autoplay @ended="handerEnded"></audio>
    <ul>
        <li :class="{active:index===currentIndex}" v-for="(item, index) in musicData" :key="item.id"
            @click="handerClick(index)">
            <h2>{{item.id}}-歌名：{{item.name}}</h2>
            <p>{{item.author}}</p>
        </li>
    </ul>
    <button @click="nextSong">下一曲</button>
</div>
<script>
    const musicData = [{
        id: 1,
        name: '数到五答应我 - 曹格',
        author: '曹格',
        songSrc: './static/数到五答应我 - 曹格.mp3'
    },
        {
            id: 2,
            name: '风吹着我向你跑来 - 焦迈奇',
            author: '焦迈奇',
            songSrc: './static/风吹着我向你跑来 - 焦迈奇.mp3'
        }
    ];
    let app = new Vue({
        el: '#app',
        data: {
            musicData: musicData,   // 可以写成 因为是一样的 musicData
            // currentSrc: './static/数到五答应我 - 曹格.mp3',
            currentIndex: 0
        },
        // 变动1  不要写死的url了 就自己拿
        computed:{
            getCurrentSongSrc(){
                return this.musicData[this.currentIndex].songSrc
            }
        },
        methods: {
            handerClick(index) {
                // 就没有必要了 就不要传值了 
                // this.currentSrc = src;
                this.currentIndex = index
            },
            handerEnded() {
                this.nextSong();
            },
            nextSong(){
                this.currentIndex++;
                if (this.currentIndex === this.musicData.length) {
                    this.currentIndex = 0
                }
                // 这个就没有必要了
                // this.currentSrc = this.musicData[this.currentIndex].songSrc;
            }
        }
    });
</script>
</body>
</html>

以上是 vue小练习--音乐播放器 的全部内容， 来源链接： utcz.com/z/380065.html

回到顶部