Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Vue中音乐播放器

Vue中音乐播放器

作者头像
小小咸鱼YwY
发布于 2020-06-19 07:59:03
发布于 2020-06-19 07:59:03
1.3K00
代码可运行
举报
文章被收录于专栏:python-爬虫python-爬虫
运行总次数:0
代码可运行

一.安装依赖

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yarn add vue-aplayer

​ or`

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm i vue-aplayer

二.使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <div class="vue_aplayer">
        <aplayer autoplay
          :music="{
            title: '歌曲标题',
            artist: '歌手名',
            src: '歌曲url',
            pic: '歌曲播放器封面url'
          }"
        />
    </div>
</template>

<script>
    import aplayer from 'vue-aplayer'
    export default {
        name: "VueAplayer",
        components: {
                aplayer
            }
    }
</script>
<style scoped>

</style>

三.官方文档

点我官方文档

点我中文官方文档

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-10-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
引入Aplayer播放音乐(踩坑向)
看到大佬们的网页可以播放音乐,不得不说我是有点心动的,所以就在这里放一下教程。写这个的时候我也在一边试着安装,算是先驱者。 有两种方式,一种是安装源文件支持,在所有的网页输出上放置播放器,这样你哪个网页都可以看到它。 还有一种是安装插件,这个可以在文章中自定义样式,如此一来,只有当你点开文章的时候才能看到它。 我个人比较倾向于第二种,但这里我都会说,事实上引用的不是同一个js的情况下,貌似也不冲突吧。 (穿越回来的我:事实上体质特殊就是体质特殊,各种无效很无奈。)
Akilar
2021/06/11
3.9K0
使用vue互联QQ音乐完成网站音乐播放器
开源地址:https://github.com/DIYgod/APlayer 在线文档:https://aplayer.js.org/#/zh-Hans/
木字楠
2022/11/30
2.8K0
使用vue互联QQ音乐完成网站音乐播放器
Vue实现在线文档预览
本次实现的文档预览的类型有:docx, xlsx, pptx, pdf,以及纯文本、代码文件和各种图片、视频格式的在线预览
不愿意做鱼的小鲸鱼
2023/07/09
4.1K0
Vue实现在线文档预览
如何给网页添加好看的HTML音乐播放器
,然后其余都放在底部Script里。 DIV ID要和Script的element: document.getElementById(‘app’)中相互对应
繁华是客
2023/03/03
1.9K0
更换音乐盒组件Aplayer+Metingjs
Aplayer 🍭 Wow, such a beautiful HTML5 music player(哇,好漂亮的HTML5音乐播放器) Aplayer是一个功能强大的HTML5音乐播放器 Aplayer官网文档:https://aplayer.js.org/#/ Metingjs Metingjs基于Aplayer插件封装好的插件,开箱即用 Metingjs官网文档:https://github.com/metowolf/MetingJS 使用方法 一、html里 <!-- APlayer --
裴大头
2022/01/17
1.6K0
更换音乐盒组件Aplayer+Metingjs
HTML简单音乐播放器「建议收藏」
通过JS部分的代码,动态给歌曲信息模块(id为player-content1)的DOM元素添加/移除active类名。 设置CSS3动画过渡属性: transition:top 0.3s ease;来生成过渡时间0.3s,速度逐渐变慢的: 上移动画效果:top:0px; ——>top:-85px; 下移动画效果: top:-85px; ——>top:0px;
全栈程序员站长
2022/09/07
4.3K0
vuejs之构建简易音乐播放器
其中query用于查询,使用v-model绑定。musicList用于得到搜索后的音乐列表。在浏览器的console中:
西西嘛呦
2020/08/26
9130
Aplayer+Metingjs音乐插件的使用
Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。
用户7162790
2022/03/23
9530
网站插入 Aplayer/网易云 音乐播放器
为了方便操作,直接使用Aplayer插件中的MetingJS (基于Meting API 的 APlayer 衍生播放器) 在 Hexo 配置文件 _config.yml 中设置:
十玖八柒
2022/07/28
3.5K0
网站插入 Aplayer/网易云 音乐播放器
网站通过代码引入Aplayer音乐播放器,无需插件
前几篇文章写了WordPress通过Hermit X插件引入网易云等音乐,但在我实际使用中发现了一些小bug已经影响到了深白站的日常使用,所以不得不放弃通过插件引入的方法。这里推荐直接用插件引入,毕竟方便省力,具体可以看我上上篇文章。
深白鸭
2023/02/22
6.4K6
网站通过代码引入Aplayer音乐播放器,无需插件
Hexo Customization
bilibili插件 bilibili 颜文字 颜文字 表情 表情 下载按钮 {% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %} 点击下载百度 引用 {% cq %} 人生乃是一面镜子, 从镜子里认识自己, 我要称之为头等大事, 也只是我们追求的目的! {% endcq %} 人生乃是一面镜子, 从镜子里认识自己, 我要称之为头等大事, 也只是我们追求的目的! 代码块 代码 图标 https://fontawesome.com/v4
故事尾音
2019/12/18
3630
和我一起写一个音乐播放器,听一首最伟大的作品
网上都在说仿一个网易云什么的,能不能高级一点点(因为听不了JAY 的歌啊)!!!在本文中,我们将使用 React 和 ts-audio 仿造流行音乐流媒体服务 Spotify 构建一个类似的音乐播放器。让你构建一个音乐播放器简单又快速!
前端修罗场
2023/10/07
6000
hexo-tag-aplayer音乐插件使用
除了使用标签 lrc 选项来设定歌词,你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中:
匿名用户的日记
2021/12/14
1.4K0
hexo-tag-aplayer使用方法
当开启 Hexo 的 文章资源文件夹 功能时,可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中,然后直接引用:
用户6808043
2022/02/25
2K0
hexo-butterfly-音频视频播放器嵌入
​ 实现引入有两种方式,一种是在markdown中用原生的html编写(需开启配置文件中aplayerInject配置),一种则是借助hexo-tag-aplayer插件进行渲染(区分全局引用、部分引用)
hahah
2022/06/14
2.2K0
7b2美化-添加网页音乐播放器
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
7990
简易网页音乐播放器
简介与要点:在网页上制作一个音乐播放器我们仅需用到一个新的标签<audio src=”素材音乐” controls></audio>;因为我们这个音乐播放不是单曲循环的使用还要用到jQuery插件做一个下拉框式的选择切换功能,所以依旧要使用到jQuery插件;使用jQuery建立一个动态生成的歌曲选择器,再用jQuery设置点击事件或者焦点失去事件,只要能触发下面的切换效果就行
全栈程序员站长
2022/09/13
2.9K0
简易网页音乐播放器
网页音乐播放器总结[通俗易懂]
总结一下Vue实战的网页音乐播放器 首先是设计出主体的整个框架 分为四个部分 最左边的歌曲列表,中间的唱片,最右边的热门评论显示以及下方的播放条
全栈程序员站长
2022/07/05
2.6K0
一个播放器和云村的故事
从疫情确定开始已两月有余了,虽然国内已经好转起来了,但境外输入在不断增加,并且国外疫情日趋严重,受此影响公司现在没什么事做,加上神兽还没复课,每天在家上课,因此天天在家陪着他。
楚客追梦
2022/11/11
8330
一个播放器和云村的故事
从零开发一个定制版音乐播放器,女朋友不就有了吗?
今天再带着大家利用 1 小时,码个定制版的音乐播放器出来,想想都刺激。学会这玩意,距离大伙找到女朋友又进了一步。
陈大奇
2021/07/23
4980
相关推荐
引入Aplayer播放音乐(踩坑向)
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文