vue2.x 实现移动音乐播放器相关笔记（一）

最新推荐文章于 2021-03-27 13:06:38 发布
最新推荐文章于 2021-03-27 13:06:38 发布
阅读量188 收藏
点赞数
分类专栏： 个人整理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42281216/article/details/88572100
版权

目录结构相关解释

api：存放接口相关js文件

base：存放基础组件，比如移动端滑动组件，利用better-scroll做的 Scroll组件等可复用组件

common：存放字体、工具类js，图片，css基础样式

components：存放业务相关组件，比如：首页，排行榜

router：存放路由相关文件

store：存放vuex相关文件

webpack基础配置：

将src的目录路径简化

v-router中将 某个地址设为默认的方法

路明凡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.x 实现移动音乐播放器——scroll组件
路明凡的博客
03-19 197
<template> <div ref="wrapper"> <slot></slot> </div> </template> <script type="text/ecmascript-6"> import BScroll from 'better-scroll' export defaul...
vue2.x 实现移动音乐播放器——js工具文件
路明凡的博客
03-19 156
// 判断是否有该class export function hasClass(el, className) { // 正则的意思：该className前，可以加空字符或不加，className后也可以加一个空字符或者不加 let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') // js正则验证函数，.test()：输入‘字符...
vue-audio-音频标签包装器； Vue 2.x的声音播放器组件-Vue.js开发
05-27
Vue.js声音播放器Vue.js声音播放器UI。 涵盖了音频标签API并添加了更多内容。 演示在此处查看DEMO安装使用npm：npm install vue-audio-Vue.js声音播放器Vue.js声音音频播放器UI。 涵盖了音频标签API并添加了更多内容。 演示在这里查看DEMO安装使用npm：npm install vue-audio --save或bower：bower install vue-audio用法从“ vue-audio”中添加组件import VueAudio； 在模板中使用 该组件具有以下属性：文件（字符串），必填； autoPlay（布尔值），可选，默认情况下为false； 循环（布尔值），可选，默认情况下为false； 用于样式
vuejs开发音乐播放器（二）：从歌手页面到歌手详情页面的子路由跳转
10-09 1392
1、先引入singer_detail.vue文件,再配置子路由router/index.js//import the singer_detail.vue import SingerDetail from 'components/singer-detail/singer-detail'//set the route export default new Router({ routes: [
基于Vue2.x全家桶的Web音乐App学习总结
xys666的博客
09-03 888
Vue-music项目概述 这是一个基于vue2.x全家桶和真实线上数据接口开发的一个媲美原生的移动端音乐App，页面包括有歌单推荐页，歌手列表页，歌手详情页，播放器页面，排行榜页面，搜索页面和个人页面。 要点总结 Vue &amp;lt;router-link&amp;gt;：通过to属性指定目标地址；配置tag属性生成别的标签，当目标路由成功激活时，将自动在tag生成的标签上自动设置rout...
一个奔跑的vue.md
06-18
- **开发工具**：HbuilderX是一款非常受欢迎的IDE（集成开发环境），支持自动引入依赖等功能，非常适合VUE项目的开发。 - **HelloWorld示例**：以下是一个简单的VUE实例，展示了如何使用VUE控制HTML页面中的内容。 ...
vue前端框架笔记.docx
04-13
Vue 前端框架笔记 前端框架 Vue 是一个流行的 JavaScript 框架，用于构建用户界面和单页应用程序。下面是 Vue 框架中的重要知识点总结： 一、指令（Directives） * v-cloak：解决闪烁问题 * v-on 缩写是 @，用来...
从小白到入门的 HBuilderX 使用指南
最新发布
03-18
**HBuilderX** 是一款由DCloud（数字天堂）开发的高效、强大的Web前端开发工具，它集成了代码编辑、调试、预览、发布等多种功能，尤其适合HTML5开发、Vue.js开发以及小程序开发等。作为一款面向新手的入门指南，我们...
springboot课堂笔记 （源码+数据库）090912
09-30
以画直线为例，其原理是在手机屏幕事件 onTouchEvent 中，当 手指触碰手机屏幕这个事件时，即 case MotionEvent.ACTION_ DOWN,设置一 个新的坐标(X,Y),然后通过 getAction0 方法记录手指在屏幕上的移动轨迹事 件，即...
jQuery学习笔记精心整理
02-23
### jQuery学习笔记精心整理 #### 一、什么是jQuery 1. **定义**： - **第三方**：jQuery是由第三方组织或个人编写的函数库，并非浏览器内置或开发者自定义的函数，因此使用前需从官方网站（[www.jquery.com]...
vue2.x实战移动端音乐app的better-scroll 使用1.10.0版本遇到的坑设置dot的轮播点和轮播图片不对应（二）
dulei_start的博客
04-25 604
1.dots的长度//这里不变 console.log(this.dots)长度为5 _initDots(){ this.dots=new Array(this.children.length) console.log(this.dots) },2.轮播的时候防止手动滑动然后错乱顺序 this.slider.on('scrollEnd',()=&gt;{ ...
better-scroll 轮播（1.0+版本）
qq_34672907的博客
04-28 508
最近因为vue不是很熟练，所以看了慕课网的移动端音乐app。 但是在跟着做轮播图的时候发现很多问题，循环不出来，自动轮播不出来等问题，发现是版本不对。解决完之后做个mark，如果你们也遇到这样的问题，希望对你们有用 首先是slider.vue import BScroll from 'better-scroll' imp
ckplayer.js插件基于网页flash播放rtmp、hls
weixin_43422861的博客
02-12 3270
1.引入文件ckplayer.js <script src="/static/lib/ckplayer/ckplayer.js"></script> 2.给一个播放视频流容器 <template> <div> <div id="video" class="video" style="width: 800px; height: ...
AudioPlayer.js，一个响应式且支持触摸操作的jquery音频插件
didingwan3441的博客
05-29 350
AudioPlayer.js是一个响应式、支持触摸操作的HTML5 的音乐播放器。本文是对其官网的说用说明文档得翻译，博主第一次翻译外文。不到之处还请谅解、之处。 JS文件地址：http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js 你可以在右键点击上面的地址，然后...
EasyPlayer.js网页全终端播放器安装使用文档
weixin_30622181的博客
01-30 3196
EasyPlayer.js 集 rtmp, hls, flv, websocket 于一身的网页直播/点播播放器, 使用简单, 功能强大 属性(Property) video-url 视频流地址 String default ‘’ video-title 视频右上角显示的标题 String default ‘’ poster 视频封面图片 S...
云播自带解析php,使用PHP SDK,web端的华为云视频点播接入，加密视频播放的坑与解决方案-全代码篇...
weixin_39969257的博客
03-27 661
下载phpdemo算是跑起来了，现在就要考虑租户系统如自身验证token的问题了。1、先介绍下我的代码目录2、文件执行的时序图和流程图2、代码demotest.phpfunctioncurl_request($url,$post='',$cookie='',$returnCookie=0){$curl=curl_init();curl_setopt($curl,CURLOPT_URL,...
ijkplayer、VLC Player、SmartPlayer、ExoPlayer播放器比较
乐学吧
03-18 3161
ijkPlayer ijkPlayer是BiliBili公司维护的一个开源工程，基于ffmpeg开发的一个播放器软件，支持Android和iOS平台，整个ijkplayer就是以ffplay为基础，如果只是使用它进行播放，集成也较为简单，使用也和MediaPlayer差不多，但是要定制化需求，就有一定的门槛高度。支持软硬编解码，支持倍速播放，可以定制化集成需要的功能，集成占用体积也很小，更详细的解释参看下面官方介绍： Features Common remove rarely used ffmpeg
JW Player 使用 RTMP 流
热门推荐
Defonds 的专栏
12-26 2万+
JW Media Player 是开源的网页使用的 Flash 播放器。本文采摘于 JW Player 的官方文档，讲解了 JW Player 对于 RTMP 的使用方法，我们可以从 JW Player 客户端的角度来了解 RTMP 协议。
JWplayer在iOS上全屏播放音频，无法正常播放（无解）
xit6482的专栏
08-21 1794
JWplayer不管是音频还是视频，都是使用Video标签来实现的，而iOS
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值