真的脑子疼，小程序的音频组件居然没有进度控制的功能，网上的方法又很少，逻辑通了就好写了。 1.所有音频播放、停止按钮使用状态切换控制 2.当点击某个音频播放时，首先将所有音频的状态置为停止状态，然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化，时间也要显示 5.拖动滚动条时，音频的当前时间随滚动条变化而变化1.wxml <text class="left_text">{{item.cur...
快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表shorcutList属性是计算属性 通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到list-view组件list-vue 组件在props中接受shortcut快速入口列表 所用到的属性 是计算属性 通过将singer.vue组件中传入到list-view组件中的数据计算得到将得到的shortcutList数据通过v-for展示在页面效果图如下下面来实现功能 1、点击右侧快速入口 左侧的列表跳转到...
效果类似一条视频的小程序，就是视频列表，然后每个视频上覆盖一张视频的封面图，点击封面图的播放按钮视频播放，点击别的视频的时候，停止播放当前视频，播放点击的视频。差不多是这样：一条视频 首先上代码：wxml <block wx:for="{{videoList}}"><view class=video-item><view class=wrapper><video class=video-video wx:if={{index==videoIndex}} id=video{{index}} autoplay={{true}} show-center-play-btn="{{false}}" src={...
在我们开发的一个小程序里面，为了给客户了解一些教程内容，我们需要增加一个在线播放视频的模块，考虑过直接使用视频组件播放服务器上的视频不成功，因此使用腾讯视频插件来播放最终测试成功。本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式，并重点介绍视频插件方式的处理过程。 1、使用视频组件播放视频 由于是我们自己录制的视频内容，本来想直接通过视频组件来播放自己服务器上的视频，理想很丰满，现实...
小程序提供了录音和播放音频的能力，从基础库 1.6.0 开始支持了wx.getRecorderManager()，录音都采用wx.getRecorderManager()提供的api，播放音频文件采用wx.createInnerAudioContext()提供的api 导入录音和播放音频功能 const recorderManager = wx.getRecorderManager(); // 录音功能 const innerAudioContext = wx.createInnerAudioContext(); // 播放音频注册录音结束事件 // 录音结束 recorderManager.onStop((res) => {co...
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释，具体内容如下 需求分析： ①：进度条随着歌曲的播放延长，歌曲播放完时长度等于黑色总进度条长度；时间实时更新。 ②：当滑动按钮时，实时更新播放时间，橙色进度条长度也会随着按钮的滑动而改变，当滑动结束时，橙色区域停留在滑动结束的位置，歌曲从当前进度开始播放。 ③：点击进度条，橙色进度条长度变为点击处至起点的长度，并从当前点开始播放歌曲。大概思路： ①：...
首先，我们需要在vue工程中安装video.js相关依赖。 npm install --save video.js npm install --save videojs-contrib-hls然后，我们需要引入videojs的css文件，例如在main.js中引入 import video.js/dist/video-js.css接着，我们在需要播放视频的页面引入js对象 import videojs from video.js import videojs-contrib-hls指定一个video容器，例如： <video id="my-video" class="video-js vjs-default-skin" controls preload="au...
起因 最近公司想做一套视频点播服务，因为考虑到成本问题，领导希望一切都用开源系统来完成。基于这个出发点，那就肯定排除了各大云视频平台（腾讯云 音视频点播VOD、网易云视频、七牛云、阿里云 视频服务等）。其实这里我还是建议购买云视频平台，因为自己造轮子肯定没有别人造的好（专门研发团队除外、以此业务为生的公司除外），再说，云视频平台服务商提供的都是一整套解决方案：收集、存储、转码、播放器等，并且在cdn和弹性扩...
起因 之前写了一篇《 vue2.0+vue-video-player实现hls播放》，里边有提到在用vue-video-player之前，我尝试着使用vue-dplayer实现hls播放，但是当时时间紧迫，还没有完成,就换方案了。现在抽时间把它补齐吧。 开始 安装依赖 npm install vue-dplayer -S编写组件HelloWorld.vue <template><div class="hello"><d-player ref="player" @play="play" :video="video" :contextmenu="contextmenu"></d-player></div> </template><script...
本文介绍了vue一个页面实现音乐播放器的示例，分享给大家，具体如下： 效果如下：项目地址：https://github.com/ermu592275254/MiniMusicPlayer 演示地址： https://ermu592275254.github.io/MiniMusicPlayer/(歌曲链接已失效) 开发前构思 界面 做音乐播放器，界面一定要炫酷。太low了听歌没感觉。本身是为了在上班的时候用，于是做成了一个类似网易云音乐的界面，大小合适。不用兼容手机端。 用css做图标 本怀着简单实用的需求去考...
整了一下 之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪 //获取歌词文本 var txt = document.getElementById("lrc"); var lrc = txt.value;//获取文本域里的值 /*console.log(lrc);*/ var lrcArr = lrc.split("[");//去除[ /*console.log(lrcArr);*/ var html = "";//定义一个空变量保存文本 for(var i=0 ; i<lrcArr.length ; i++) { var arr = lrcArr[i].split("]"); /*console.log(arr[1]);*/...
现效果如下：由于我这边不需要其他按钮，就没写 数据是由后台提供，在这做了个小列子 后台代码 public ActionResult MusicPlayer(int musicId=0) {MusicPlayerModel model = new MusicPlayerModel();switch (musicId){default:model.MusicName = "Believe-动画《海贼王》";model.CoverImg = "/Content/Music/Believe-cover.jpg";model.FileUrl = "/Content/Music/Believe.mp3";model.MusicStartSecond = 0;model.MusicEndSecond = ...
小程序中提供了两种录音的API 旧版录音功能 首先启动录音，然后停止录音即可拉到音频的临时地址 启动录音： var that = this;wx.startRecord({success: function (res) {// 调用了停止录音接口就会触发这个函数，res.tempFilePath为录音文件临时路径var tempFilePath = res.tempFilePaththat.setData({src: tempFilePath})},fail: function (res) {//录音失败的处理函数}})停止录音： wx.stopRecord()播放录音： wx.playVoice({fil...
本文实例讲述了微信小程序使用video组件播放视频功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml代码如下: <video src="../../pages/video/movie.mp4" binderror="videoErrorCallback"></video>② index.js Page({data:{// text:"这是一个页面"},videoErrorCallback: function (e) {console.log(视频错误信息:+e.detail.errMsg);} })3、源代码点击此处本站下载。 关于video组件的详细介绍可参考官网...
本文实例讲述了微信小程序使用audio组件播放音乐功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml代码如下: <audio src="{{audioSrc}}" poster="{{audioPoster}}" name="{{audioName}}" author="{{audioAuthor}}" controls></audio>② index.js Page({data: {audioPoster: http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000,audioName: 此时此刻,audioAuthor: ...