【Vue】简易的音乐播放器

最新推荐文章于 2024-03-12 21:48:20 发布

「已注销」

最新推荐文章于 2024-03-12 21:48:20 发布

阅读量280

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_54468192/article/details/112692744

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

功能介绍

1、搜索功能
在这里插入图片描述

2、播放功能
在这里插入图片描述

3、下载功能
在这里插入图片描述

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的音乐</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="shortcut icon" href="./img/music.png" type="image/x-icon">
  <style>
    [v-clock] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app" v-clock>
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="16">
                    <img src="./img/logo.png" alt="logo" height="30px">
                </el-col>
                <el-col :span="6">
                    <el-input v-model="inputText" placeholder="搜索"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-col>
              </el-row>
        </el-header>
        <el-main v-show="songs.length!==0">
            <el-row>
                <el-col :span="24">
                  <el-table :data="songs" style="width: 100%;" height="520" :show-header="false">
                    <el-table-column>
                      <template slot-scope="scope">
                        <i class="el-icon-headset"></i>
                        <span style="margin-left: 10px;">{{scope.row.name}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column>
                      <template slot-scope="scope">
                        <i class="el-icon-video-play" @click="handlePlay(scope.$index)"></i>
                      </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot-scope="scope">
                      <i class="el-icon-download" @click="handleDownload(scope.$index)"></i>
                    </template>
                </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
        </el-main>
        <el-footer v-show="songs.length!==0">
          <audio :src="musicUrl" autoplay="autoplay" loop="loop" controls="controls" style="width: 100%; margin: 5px;"></audio>
        </el-footer>
      </el-container>
  </div>
</body>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="./js/main.js"></script>
</html>