通过网易的API完成一个简易的音乐播放器

效果图通过网易的API完成一个简易的音乐播放器_第1张图片

工程环境

1、使用node在本地部署网易云音乐API接口

下载解压

链接:https://pan.baidu.com/s/1YQiMJoUMEYlMz14FH5xxRA?pwd=36o5
提取码:36o5
通过网易的API完成一个简易的音乐播放器_第2张图片

工程目录概览

(js文件夹里面放了music.html和main.js和vue.js)
通过网易的API完成一个简易的音乐播放器_第3张图片

工程目录)(有点重复,懒得删除了)

通过网易的API完成一个简易的音乐播放器_第4张图片

main.js

/*
  1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果

  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址
*/
var app = new Vue({
    el: "#player",
    data: {
        // 查询关键字
        query: "",
        // 歌曲数组
        musicList: [],
        // 歌曲地址
        musicUrl: "",
        // 歌曲封面
        musicCover: "",
        // 歌曲评论
        hotComments: [],
        // 动画播放状态
        isPlaying: false,
        // 遮罩层的显示状态
        isShow: false,
        // mv地址
        mvUrl: ""
    },
    methods: {
        // 歌曲搜索
        searchMusic: function() {
            var that = this;
            axios.get("http://localhost:3000/search?keywords=" + this.query).then(
                function(response) {
                    // console.log(response);
                    that.musicList = response.data.result.songs;
                    //console.log(response.data.result.songs);
                },
                function(err) {}
            );
        },
        // 歌曲播放
        playMusic: function(musicId) {
            //   console.log(musicId);
            var that = this;
            // 获取歌曲地址
            axios.get("http://localhost:3000/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) {}
            );

            // 歌曲详情获取
            axios.get("http://localhost:3000/song/detail?ids=" + musicId).then(
                function(response) {
                    // console.log(response);
                    // console.log(response.data.songs[0].al.picUrl);
                    that.musicCover = response.data.songs[0].al.picUrl;
                },
                function(err) {}
            );

            // 歌曲评论获取
            axios.get("http://localhost:3000/comment/music?id=" + musicId).then(
                function(response) {
                    // console.log(response);
                    // console.log(response.data.hotComments);
                    that.hotComments = response.data.hotComments;
                },
                function(err) {}
            );
        },
        // 歌曲播放
        play: function() {
            // console.log("play");
            this.isPlaying = true;
        },
        // 歌曲暂停
        pause: function() {
            // console.log("pause");
            this.isPlaying = false;
        },
        // 播放mv
        playMV: function(mvid) {
            var that = this;
            axios.get("http://localhost:3000/mv/url?id=" + mvid).then(
                function(response) {
                    // console.log(response);
                    console.log(response.data.data.url);
                    that.isShow = true;
                    that.mvUrl = response.data.data.url;
                },
                function(err) {}
            );
        },
        // 隐藏
        hide: function() {
            this.isShow = false;
        }
    }
});

mymusic.html


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>我的音乐title>
    
    <link rel="stylesheet" href="../CSS/index.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="query" @keyup.enter="searchMusic" />
        div>
        <div class="center_con">
            
            <div class='song_wrapper'>
                <ul class="song_list">
                    <li v-for="item in musicList">
                        <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>
                <img src="../images/line.png" class="switch_btn" alt="">
            div>
            
            <div class="player_con" :class="{playing:isPlaying}">
                <img src="../images/player_bar.png" class="play_bar" />
                
                <img src="../images/disc.png" class="disc autoRotate" />
                <img :src="musicCover" class="cover autoRotate" />
            div>
            
            <div class="comment_wrapper">
                <h5 class='title'>热门留言h5>
                <div class='comment_list'>
                    <dl v-for="item in hotComments">
                        <dt><img :src="item.user.avatarUrl" alt="">dt>
                        <dd class="name">{{ item.user.nickname}}dd>
                        <dd class="detail">
                            {{ item.content }}
                        dd>
                    dl>
                div>
                <img src="../images/line.png" class="right_line">
            div>
        div>
        <div class="audio_con">
            <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio">audio>
        div>
        <div class="video_con" v-show="isShow" style="display: none;">
            <video :src="mvUrl" controls="controls">video>
            <div class="mask" @click="hide">div>
        div>
    div>
div>

<script src="vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="main.js">script>
body>

html>


vue.js

通过网易的API完成一个简易的音乐播放器_第5张图片

https://gitee.com/yang-huishan/music.git

index.css

通过网易的API完成一个简易的音乐播放器_第6张图片

https://gitee.com/yang-huishan/music.git

运行播放器的图片资源

链接:https://pan.baidu.com/s/1YQiMJoUMEYlMz14FH5xxRA?pwd=36o5
提取码:36o5

你可能感兴趣的:(java,html5,css,vue.js,前端)