<!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. （原创第一篇，踩坑无数得来的，对Ai自动化测试框架很有帮助）appium自动化测试时遇到不能使用element定位的在用坐标点击之后获取焦点如何输入文本

    现在开发的前端界面使用vue或者更牛逼技术,导致使用appium或者uiautomator2做自动化测试时不能识别到元素,无法使用传统的id,name或者xpath,这时我们需要使用坐标点击文本框.有 ...

  2. 2022-06-17：给定一个数组arr，含有n个数字，可能有正、有负、有0， 给定一个正数k。 返回所有子序列中，累加和最大的前k个子序列累加和。 假设K不大，怎么算最快？ 来自Amazon。

    2022-06-17:给定一个数组arr,含有n个数字,可能有正.有负.有0, 给定一个正数k. 返回所有子序列中,累加和最大的前k个子序列累加和. 假设K不大,怎么算最快? 来自Amazon. 答案 ...

  3. 2022-06-14：数组的最大与和。 给你一个长度为 n 的整数数组 nums 和一个整数 numSlots ，满足2 * numSlots ＞= n 。总共有 numSlots 个篮子，编号为 1

    2022-06-14:数组的最大与和. 给你一个长度为 n 的整数数组 nums 和一个整数 numSlots ,满足2 * numSlots >= n .总共有 numSlots 个篮子,编号 ...

  4. 2021-02-03：手写代码：KMP算法。

    福哥答案2021-02-03: Knuth-Morris-Pratt 字符串查找算法,简称为 KMP算法,常用于在一个文本串 S 内查找一个模式串 P 的出现位置.这个算法由 Donald Knuth ...

  5. 2021-03-28：定义一种数：可以表示成若干（数量>1）连续正数和的数 。比如:5 = 2+3，5就是这样的数 ；12 = 3+4+5，12就是这样的数 。1不是这样的数，因为要求数量大于1个、连续正数和 。2 = 1 + 1，2也不是，因为等号右边不是连续正数 。给定一个参数N，返回是不是可以表示成若干连续正数和的数 。

    2021-03-28:定义一种数:可以表示成若干(数量>1)连续正数和的数 .比如:5 = 2+3,5就是这样的数 :12 = 3+4+5,12就是这样的数 .1不是这样的数,因为要求数量大于1 ...

  6. 2021-04-03：给定两个字符串str1和str2，想把str2整体插入到str1中的某个位置，形成最大的字典序，返回字典序最大的结果。

    2021-04-03:给定两个字符串str1和str2,想把str2整体插入到str1中的某个位置,形成最大的字典序,返回字典序最大的结果. 福大大 答案2021-04-03: 1.暴力法. 2.DC ...

  7. vue全家桶进阶之路17：组件与组件间的通信

    在 Vue2 中,组件与组件之间的通信可以通过以下几种方式来实现: Props 和 Events 这是 Vue2 中最基础和常用的父子组件通信方式.父组件通过属性传递数据给子组件,子组件通过事件触发向 ...

  8. json和字典dict的区别

    json和字典dict的区别? 银河有希子关注 2021.07.03 11:13:00字数 987阅读 173 作者:Gakki json和字典dict的区别? 字典写法:dict1 = {'Alic ...

  9. SQL:DATEDIFF和DATEADD函数

    DATEDIFF和DATEADD函数.DATEDIFF函数计算两个日期之间的小时.天.周.月.年等时间间隔总数.DATEADD函数计算一个日期通过给时间间隔加减来获得一个新的日期.要了解更多的DATE ...

  10. LeetCode 周赛 346（2023/05/21）仅 68 人 AK 的最短路问题

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. LeetCode 单周赛第 345 场 · 体验一题多解的算法之美 单周赛 345 概览 T1. 删除子串后 ...