<!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. windows下MinGW编译ffmpeg

    windows下MinGW编译ffmpeg 1.官网下载MinGW并安装       1)下载 ,下载网址: https://sourceforge.net/projects/mingw/files/ ...

  2. [ZJOI2020] 序列 线性规划做法/贪心做法

    线性规划做法 同时也作为线性规划对偶的一个小小的学习笔记. 以下 \(\cdot\) 表示点积,\(b,c,x,y\) 是行向量. \(A\) 是矩阵,对于向量 \(u,v\) 若 \(\forall ...

  3. C++ Primer 5th 阅读笔记：前言

    机器效率和编程效率 Its focus, and that of its programming community, has widened from looking mostly at machi ...

  4. 推荐一个基于.Net Framework开发的Windows右键菜单管理工具

    平常在我们电脑,我们都会安装非常多的软件,很多软件默认都会向系统注册右键菜单功能,这样方便我们快捷打开.比如图片文件,通过右键的方式,快捷选择PS软件打开. 如果我们电脑安装非常多的软件,就会导致我们 ...

  5. 深入理解 slab cache 内存分配全链路实现

    本文源码部分基于内核 5.4 版本讨论 在经过上篇文章 <从内核源码看 slab 内存池的创建初始化流程> 的介绍之后,我们最终得到下面这幅 slab cache 的完整架构图: 本文笔者 ...

  6. vue3+vite2+element-plus+ts搭建一个项目

    花了几天用 vue3+ vite2+ element-plus+ ts 搭了个 极简版骨架型数据管理系统,使用静态数据模拟动态路由,路由拦截,登录页面鉴权等,使用了iconify字体图标,整合了ces ...

  7. Python pip 修改镜像源为豆瓣源

    配置文件 编辑配置文件 ~/.pip/pip.conf,添加内容如下: [global] index-url = https://pypi.doubanio.com/simple trusted-ho ...

  8. 浅析HTTPS的通信机制

    什么是HTTPS? HTTPS 是在HTTP(Hyper Text Transfer Protocol)的基础上加入SSL(Secure Sockets Layer),在HTTP的基础上通过传输加密和 ...

  9. SpringBoot整合OSS文件上传

    一.注册阿里云账号并开通OSS服务 1.登录阿里云账号 2.创建一个bucket 3.创建子用户 对自用户分配权限,打开操作OSS的全部权限(也可根据业务需求进行更改) 4.配置上传跨域规则 任何来源 ...

  10. 万字长文讲透 RocketMQ 4.X 消费逻辑

    RocketMQ 是笔者非常喜欢的消息队列,4.9.X 版本是目前使用最广泛的版本,但它的消费逻辑相对较重,很多同学学习起来没有头绪. 这篇文章,笔者梳理了 RocketMQ 的消费逻辑,希望对大家有 ...