Vue音乐播放器

最新推荐文章于 2024-09-25 23:51:40 发布

hzk_niubi1313

最新推荐文章于 2024-09-25 23:51:40 发布

阅读量323

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/hzk_niubi1313/article/details/124980996

版权

本文介绍了如何使用Vue.js创建一个音乐播放器，通过控制台查看歌曲位置，讲解了获取不同音乐数据的地址方法。

摘要由CSDN通过智能技术生成

<!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>悦听player</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/playerIndex.css">
</head>

<body>
  <div class="wrap">
    <!-- 播放器主体区域 -->
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model="name" @keyup.enter="searchMusic" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper'>
          <ul class="song_list">
            <li v-for="(m,index) in musics"><a href="javascript:;"@click="play(index)"></a> <b>{
   {
   m.name}}</b> <span v-show="m.mvid!=0"><i @click