微信小程序实现音乐播放器

今天继续玩小程序的api,看着别人例子跟着做一个小程序,留下一个脚印吧。末尾附上github源码地址。实现以下微信小程序的音乐播放器,先看下效果图

界面做的确实挺丑的,先上wxss文件

//index.wxss
.button-style{
  background-color: #eee;
  border-radius: 8rpx;
  margin: 20rpx;
}

只是顶一个简单的按钮的圆角和间距,颜色这个我还是用primary这个小绿色。
下面是index.wxml文件

//index.wxml
<button class="button-style" type="primary" bindtap="listenerButtonPlay">播放</button>
<button class="button-style" type="primary" bindtap="listenerButtonPause">暂停</button>
<button class="button-style" type="primary" bindtap="listenerButtonSeek">设置播放进度</button>
<button class="button-style" type="primary" bindtap="listenerButtonStop">停止播放</button>
<button class="button-style" type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button>

没办法,用开发者工具打出来就是这样的丑格式

下面是重点index.js

//index.js
//获取应用实例
var app = getApp()
Page({
 data:{

 },
 //播放
 listenerButtonPlay:function(){
  wx.playBackgroundAudio({
   dataUrl: 'http://ac-5g9r20ds.clouddn.com/e54ad7f0a834b9c07ec6.mp3',
   title:'李宗盛',
   //图片地址地址
   coverImgUrl:'http://ac-5g9r20ds.clouddn.com/63bedb5f584234b6827c.jpg'
  })
 },
 //监听button暂停按钮
 listenerButtonPause:function(){
  wx.pauseBackgroundAudio({

  });
  console.log('暂停播放')
 },
 /**
  * 播放状态
  */
 listenerButtonGetPlayState:function(){
  wx.getBackgroundAudioPlayerState({
   success: function(res){
    // success
    //duration 选定音频的长度(单位:s),只有在当前有音乐播放时返回
    console.log('duration:' + res.duration)
    console.log('currentPosition:' + res.currentPosition)
    //status  播放状态(2:没有音乐在播放,1:播放中,0:暂停中)
    console.log('status:' + res.status)
    console.log('downloadPercent:' + res.downloadPercent)
    //dataUrl  歌曲数据链接,只有在当前有音乐播放时返回
    console.log('dataUrl:' + res.dataUrl)
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  })
 },
 /**
  * 设置进度
  */
 listenerButtonSeek:function(){
  wx.seekBackgroundAudio({
   position: 40
  })
 },
 /**
  * 停止播放
  */
 listenerButtonStop:function(){
  wx.stopBackgroundAudio({

  })
  console.log('停止播放')
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
  /**
   * 监听音乐播放
   */
  wx.onBackgroundAudioPlay(function() {
   // callback
   console.log('onBackgroundAudioPlay')
  })
  /**
   * 监听音乐暂停
   */
  wx.onBackgroundAudioPause(function() {
   // callback
   console.log('onBackgroundAudioPause')
  })
  /**
   * 监听音乐停止
   */
  wx.onBackgroundAudioStop(function() {
   // callback
   console.log('onBackgroundAudioStop')
  })
 }
})

里面可以先按照顺序来看onLoad函数,里面定义了三个监听函数,可以看到console里面效果如图

其实里面的api使用不是很难,在button标签里面写好bindtap事件名,在js方法中对应相应的处理function,像wx.playBackgroundAudio这个只需要你去填充一些参数即可,不懂得可以参考api文档(API入口)。
附上github源码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

    把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//

  • 微信小程序实现音乐播放器

    今天继续玩小程序的api,看着别人例子跟着做一个小程序,留下一个脚印吧.末尾附上github源码地址.实现以下微信小程序的音乐播放器,先看下效果图 界面做的确实挺丑的,先上wxss文件 //index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; } 只是顶一个简单的按钮的圆角和间距,颜色这个我还是用primary这个小绿色. 下面是index.wxml文件 //index.wxml

  • 微信小程序实现音乐播放页面布局

    本文实例为大家分享了微信小程序实现音乐播放页面的布局,供大家参考,具体内容如下 1.效果图如下,点击播放按钮后,光碟转动,播放按钮变为暂停按钮:播放中点击暂停,光碟复位,暂停按钮恢复为播放按钮. 本文仅提供样式布局,其他具体响应不作介绍 2.样式布局代码 wxml: <view class="page_music"> <view class='icon {{isPlay?"rotateAu":""}}' mode="w

  • 微信小程序录音与播放录音功能

    小程序中提供了两种录音的API 旧版录音功能 首先启动录音,然后停止录音即可拉到音频的临时地址 启动录音: var that = this; wx.startRecord({ success: function (res) { // 调用了停止录音接口就会触发这个函数,res.tempFilePath为录音文件临时路径 var tempFilePath = res.tempFilePath that.setData({ src: tempFilePath }) }, fail: function

  • 微信小程序自定义音乐进度条的实例代码

    需求:显示音乐播放按钮.可手动拖拽进度条:页面中含多个音乐,播放当前音乐时暂停其他音乐播放. 小程序自带标签 audio 小程序自带的audio标签含固定的样式,且有最小尺寸.目前项目也不含name和author字段,所以放弃audio标签. 实现效果图 初始化音乐数据 <text>{{currentProcess}}</text> <slider bindchange="" bindtouchstart="" bindtouchend

  • 微信小程序 audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序多音频播放进度条问题

    真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了. 1.所有音频播放.停止按钮使用状态切换控制 2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示 5.拖动滚动条时,音频的当前时间随滚动条变化而变化 1.wxml <text class="left_text">{{item.currentProcess}

  • 微信小程序实现自动播放视频模仿gif动图效果实例

    需求背景: 在小程序页面插入gif动态图,但gif图一般体积比较大,转而用自动播放视频的模式来模拟gif图的效果,丰富页面展示.自动播放的视频,无控制条,无声音,自动循环播放. 技术难点: 因为微信小程序在同一个页面,存在多个视频时(建议不超过3个视频),会出现卡顿甚至闪退的情况. developers.weixin.qq.com/community/d- 方案: 参考小程序社区讨论方案,当视频未出现在屏幕可视区域时,用图片占位,出现在屏幕中,把图片替换成视频,并且自动播放. 代码注意点: vi

  • 微信小程序  audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序之页面拦截器的示例代码

    场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页. 是否有系统角色信息需要通过异步请求来获取. 需求分析&实现 对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件: HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Larav

随机推荐