网页音乐播放器总结[通俗易懂]

网页音乐播放器总结[通俗易懂]总结一下Vue实战的网页音乐播放器首先是设计出主体的整个框架分为四个部分最左边的歌曲列表,中间的唱片,最右边的热门评论显示以及下方的播放条然后开始准备进行功能的实现首先是需要导入Vue的依赖以及axios的js网络依赖库<!–开发环境版本,包含了有帮助的命令行警告–><scriptsrc=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><!–官网提供的axio

大家好,又见面了,我是你们的朋友全栈君。

总结一下Vue实战的网页音乐播放器
首先是设计出主体的整个框架
分为四个部分
最左边的歌曲列表,中间的唱片,最右边的热门评论显示以及下方的播放条

然后开始准备进行功能的实现
首先是需要导入Vue的依赖以及axios的js网络依赖库

  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.音乐搜索功能
进行音乐搜索,用户需要进行输入关键字
定义一个query变量来进行关键字的接收以及一个数组用于存放数据

data: { 
   
        // 查询关键字
        query: "",
        // 歌曲数组
        musicList: [],
}

编写查询歌曲方法:

// 歌曲搜索
        searchMusic: function() { 
   
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
                function(response) { 
   
                    // console.log(response);
                    that.musicList = response.data.result.songs;
                    console.log(response.data.result.songs);
                },
                function(err) { 
   })


        },

使用get方式来获取,记得在编写完整的数据之前
先打印出返回的数据response,在里面查找一下搜索到的路径
比如我们需要的歌曲信息,就在response.data.result.songs这个地方
因此进行一个提取保存,然后传递给网页

<li v-for="item in musicList">

使用v-for进行一个循环,进行展示
2.歌曲播放
我们的歌曲利用的是网络上的资源,因此每一个歌曲都有一个歌曲id
每个id都对应着一个播放地址播放地址
因此,使用axios进行id+接口组合的网络请求,将返回的数据进行分析
歌曲的url在response.data.data[0].url里
注意在这里要设置一个that = this
因为this是会随着每次搜索点击而变动的,使用that来保存现在所需要的this

var that = this;
            // 获取歌曲地址
            axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
                function (response) { 
   
                    // console.log(response);
                    // console.log(response.data.data[0].url);
                    that.musicUrl = response.data.data[0].url;
                },
                function (err) { 
   })

在前端网页上添加相应的触发方法
对应的歌曲名应该设计成动态的{
{item.name}}

<a href="javascript:;" @click="playMusic(item.id)"></a>
              <b>{ 
   { 
   item.name}}</b>

歌曲的url以及获取,因此在网页上的audio里面进行绑定

<audio ref='audio' @play="play" @pause="pause"  :src="musicUrl" controls autoplay loop class="myaudio"></audio>

使用:src=”musicUrl”进行绑定歌曲源
3.歌曲专辑图片显示
每个歌曲都有一个专辑图片,图片的URL就在返回的数值里面

// 歌曲封面
musicCover: "",

//歌曲详情搜索
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
.then(function (response) { 
   
//console.log(response.data.songs[0].al.picUrl);
that.musicCover = response.data.songs[0].al.picUrl;
},function (err) { 
   })

注释掉的console.log都是为了测试是否返回正确的值
确保返回正确后再设计函数进行处理
获取到图片的URL后在前端页面进行绑定

//使用v-bind进行绑定
<img :src="musicCover" class="cover autoRotate" />

4.热门评论获取
同理,热门评论是在response.data.hotComments
通过接口加音乐id来获取所需要的数据组

//歌曲评论的获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
.then((function (response) { 
   
console.log(response.data.hotComments);
that.hotConments = response.data.hotComments;
                }))

热门评论我们用//歌曲评论 hotConments:[],
数组来进行保存
然后在前端使用循环语句进行返回
每个热门语句都对应着评论者和头像
因此同样进行筛选返回

<!-- 评论容器 -->
        <div class="comment_wrapper">
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>
            <dl v-for="item in hotConments">
              <dt><img :src="item.user.avatarUrl" alt=""></dt>
              <dd class="name">{ 
   { 
    item.nickname }}</dd>
              <dd class="detail">
                { 
   { 
    item.content }}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>

使用item.nickname来实现动态名称和头像显示
5.仿真胶片播放动画
我们希望当播放的时候,能有一个胶片旋转的动画进行播放
来增加更多的趣味性和真实性
首先就需要定义播放的状态,来判断是否在播放
逻辑很简单

//动画播放状态
isPlaying:false,
play:function () { 
   
 // console.log("play");
this.isPlaying = true;
        },

pause:function () { 
   
 // console.log("pause");
this.isPlaying = false;
        },

定义一个变量,用于记录播放状态,初始设计为false
在前端的audio播放按钮进行绑定
每次点击都进行一个状态的切换(上面的代码里面已经写出来了)
然后在黑胶唱片那个div进行一个v-bind绑定

<div class="player_con" :class="{playing:isPlaying}">

当isplaying为真的时候,class名变换
相应的css样式生效,形成旋转的效果

/* 旋转的动画 */
@keyframes Rotate { 
   
  from { 
   
    transform: rotateZ(0);
  }
  to { 
   
    transform: rotateZ(360deg);
  }
}
/* 旋转的类名 */
.autoRotate { 
   
  animation-name: Rotate;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-duration: 5s;
}
/* 是否正在播放 */
.player_con.playing .disc, .player_con.playing .cover { 
   
  animation-play-state: running;
}

6.mv的播放
除了普通的音乐播放外,还可以进行mv的播放
每个歌曲都对应着一个mvid,每个mvid又对应着相应的mvURL
我们通过解析出mv的URL来实现视频播放
但并不是每一个歌曲都具有对应的mv
因此首先应该进行一个筛选
在前端歌曲列表中

<ul class="song_list">
<li v-for="item in musicList">
<!--        这个a标签表示的是左侧列表里面的播放按钮      -->
<a href="javascript:;" @click="playMusic(item.id)"></a>
<b>{ 
   { 
   item.name}}</b>
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span></li>
</ul>

使用v-if来进行判断,当具有mvid时,显示mv播放按钮,否则不显示
接下来编写播放mv功能
核心思想就是提取出mv的URL,然后传递到页面上进行一个绑定

//播放MV
        playMV:function (mvid) { 
   
            var that = this;
            axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
                .then(function (response) { 
   
                    that.isShow = true;
                    that.mvUrl = response.data.data.url;
                },function (err) { 
   })
        },


<video :src="mvUrl"  controls="controls"></video>

当然mv能打开也要能关闭
我们设计一个蒙版mask,在点击蒙版的时候进行隐藏
因此要设计一个状态变量来进行记录

<div class="video_con" v-show="isShow" style="display: none;">
        <video :src="mvUrl"  controls="controls"></video>
        <div class="mask" @click="hide"></div>
      </div>
//隐藏MV
        hide:function () { 
   
            this.isShow = false;
        }

至此,音乐播放器大功告成!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149949.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Ubuntu18.04显卡驱动及CUDA卸载

    Ubuntu18.04显卡驱动及CUDA卸载背景故事上文提到显卡驱动和CUDA的安装,你们真的因为一切这么流畅么?当然不是,不然我也不会说是“踩坑”之旅了,因为驱动下错了,就搞了半天,这里记录一下如何卸载驱动和CUDA。卸载步骤卸载显卡驱动$sudoapt-get–purgeremovenvidia*$sudoaptautoremove卸载CUDA$sudoapt-get–purgeremove”*cublas*””cuda*”OK完成,可以重装了。ps.此时重启可能导致图形操作界面无法打开。

  • 剑指Offer——Trie树(字典树)

    剑指Offer——Trie树(字典树)剑指Offer——Trie树(字典树)Trie树Trie树,即字典树,又称单词查找树或键树,是一种树形结构,是一种哈希树的变种。典型应用是统计和排序大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计。它的优点是:最大限度地减少无谓的字符串比较,查询效率比哈希表高。Trie的核心思想是空间换时间。利用字符串的公共前缀来降低查询时间的开销以达到提高效率的目的。

  • Java开发手册之OOP规约

    Java开发手册之OOP规约Java开发手册之OOP规约

  • 归一化方法总结_实例归一化

    归一化方法总结_实例归一化参考自:http://blog.csdn.net/zbc1090549839/article/details/44103801http://blog.csdn.net/junmuzi/article/details/48917361归一化方法(NormalizationMethod)1。把数变为(0,1)之间的小数主要是为了数据处理方便提出来的,把数据映

    2022年10月11日
  • srm 534

    srm 534

  • JWT单点登录的三种解决方案「建议收藏」

    JWT单点登录的三种解决方案「建议收藏」看过不少JWT和单点登录系统的文章,大部分说的比较片面。这里就根据自己的实际开发经验谈一下我的理解。可以总结为以下三种方案:三种方案:1.纯Jwt2.Jwt+认证中心Redis3.Jwt+认证中心Redis+多系统Redis1.纯Jwt方案1.用户去认证中心登录,认证中心生成jwt,返回给客户端。2.客户端携带jwt请求多个系统3.每个系统各自解析jwt,取出用户信息。能解析成功就说明jwt有效.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号