<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://unpkg.com/vue/dist/vue.js"></script>

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

</head>

<body>

<div  id="app" >

<div style="align-item:top">

<input type="text" placeholder="歌曲名称" v-model="musicName">

<input type="button" value="搜索" @click="getMusic">

</div>

    <div><audio controls>

<source src="horse.mp3" >

</audio></div>

<div>

<ul>

    <li v-for="i in musicList" style="list-style:none">

    <input type="button" value="播放" @click="playMusic(i.id)">

        {{i.name}}<div style="margin-top:10px"></div></li>

</ul>

</div>

</div>

<script>

new Vue({

el: '#app',

data: {

musicName:'六月',

musicList:[]

},

methods:{

getMusic:function(){

 var t=this;

axios.get("https://autumnfish.cn/search?keywords="+t.musicName)

     .then(function(response){

     t.musicList=response.data.result.songs;

     console.log(t.musicList[0]);

     },function(err){});

   },

playMusic:function(musicId){

axios.get("https://music.liuzhijin.cn/?id="+musicId+"&type=netease")

     .then(function(response){

     console.log(response);

     },function(err){});

   }

  }

})

</script>

</body>

</html>

2021-7-6 vue音乐播放器的更多相关文章

  1. 一个基于H5audio标签的vue音乐播放器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue音乐播放器

    利用vue写一个简单的音乐播放器,包括功能有歌曲搜索.歌曲播放.歌曲封面.歌曲评论.播放动画.mv播放六个功能. <template> <div class="wrap&q ...

  3. vue 音乐播放器报错

    使用Vue报错[Vue warn]: Error in nextTick: "TypeError: fn.bind is not a function"页面进不去. 检查:看看da ...

  4. Vue音乐播放器（三）：项目目录介绍，以及图标字体、公共样式等资源准备

    我们所有的开发都是基于修改src下面的目录 里面的文件去做开发即可 stylus的使用是需要下载stylus-loader的包的 渲染效果 配置修改eslintrc.js 配置了webpack.bas ...

  5. 如何用vue打造一个移动端音乐播放器

    写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...

  6. 02 Vue介绍与安装，指令系统 v-*、音乐播放器

    VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...

  7. vue小练习--音乐播放器

    1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  8. vue——一个页面实现音乐播放器

    请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实.不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一行当 ...

  9. Qt+MPlayer音乐播放器开发笔记（一）：ubuntu上编译MPlayer以及Demo演示

    前言   在ubuntu上实现MPlayer播放器播放音乐.   Demo                Mplayer   MPlayer是一款开源多媒体播放器,以GNU通用公共许可证发布.此款软件 ...

  10. SE Springer小组之《Spring音乐播放器》可行性研究报告三、四

    3 对现有系统的分析 由于本次可行性分析主要是建立在团队自行实现一个音乐软件的目标上,并不是在一个现有系统的基础上开发改进的新系统.因此这里将分析一款市面上已经存在的音乐软件(以下称为W音乐),并为之 ...

随机推荐

  1. C# 反射 判断类型是否是列表

    1 /// <summary> 2 /// 判断类型是否为可操作的列表类型 3 /// </summary> 4 /// <param name="type&q ...

  2. 在循环内调用 size() 方法的开销大吗？

    for (int i = 0; i < buildings.size(); i++) {} 和 int n = buildings.size(); for (int i = 0; i < ...

  3. #Python merge函数，pandas库数据查询功能，对标V-LOOKUP

    日常办公中,我们经常会遇到需要匹配表,匹配对应数据的场景,在EXCEL中,我们习惯使用VLOOKUP函数或者是X-LOOKUP函数,今天学习的是Python,pandas库中的匹配功能. 首先导入所需 ...

  4. 用tk.mybaits实现指定字段更新

    ​ 去年年底的因为业务需要需要在使用tk.mybaits框架的系统中实现指定字段的更新,可是tk.mybaits框架本身并不支持这个功能,我翻遍了CSDN和其他相关的技术相关的网站都没有找到相关的解决 ...

  5. 2023-03-20：给定一个无向图，保证所有节点连成一棵树，没有环， 给定一个正数n为节点数，所以节点编号为0~n-1，那么就一定有n-1条边， 每条边形式为{a, b, w}，意思是a和b之间的无

    2023-03-20:给定一个无向图,保证所有节点连成一棵树,没有环, 给定一个正数n为节点数,所以节点编号为0~n-1,那么就一定有n-1条边, 每条边形式为{a, b, w},意思是a和b之间的无 ...

  6. 2021-09-03：直线上最多的点数。给你一个数组 points ，其中 points[i] = [xi, yi] 表示 X-Y 平面上的一个点。求最多有多少个点在同一条直线上。力扣149。

    2021-09-03:直线上最多的点数.给你一个数组 points ,其中 points[i] = [xi, yi] 表示 X-Y 平面上的一个点.求最多有多少个点在同一条直线上.力扣149. 福大大 ...

  7. Vue根据时间戳制作倒计时15分钟

    废话不多说直接上代码 <script> export default { data() { return { downTimeShow: true, timer: null, downTi ...

  8. 最流行的AI绘图工具Midjourney，你不得不知道的使用技巧

    ​关注文章下方公众号,可免费获取AIGC最新学习资料 本文字数:1500,阅读时长大约:10分钟 Midjourney成为了最受欢迎的生成式AI工具之一.它的使用很简单.输入一些文本,Midjourn ...

  9. VuePress2.0构建项目文档系统

    VuePress2.0构建项目文档系统 参考TerraMours 官网.https://terramours.site/ 文件结构参考: 1.修改首页README.md 修改项目下的README.md ...

  10. 【python基础】复杂数据类型-列表类型（数值列表）

    1.数值列表 列表非常适合用于存储数字集合,而python提供了很多工具,可帮助我们高速地处理数字列表. 1.1 range函数 python的range函数能够轻松的生成连续一系列数字. 其语法格式 ...