文档章节

微信小程序把玩(三十四)Audio API

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 314
阅读 5
收藏 0

这里写图片描述

没啥可值得太注意的地方

重要属性:

1. wx.getBackgroundAudioPlayerState(object) 获取播放状态

这里写图片描述

2.wx.playBackgroundAudio(object)播放音乐

这里写图片描述

3.wx.pauseBackgroundAudio()暂停音乐

4.wx.seekBackgroundAudio(object) 设置播放进度

这里写图片描述

5.wx.stopBackgroundAudio()停止播放音乐

三个监听器:

这里写图片描述

wxml

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

js

Page({
  data:{
    // text:"这是一个页面"
  },

  listenerButtonPlay: function() {
      wx.playBackgroundAudio({
          //播放地址
          dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',
          //title 音乐名字
          title: '青云志',
          //图片地址
          coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'

      })
  },

  /** * 播放状态 */
  listenerButtonGetPlayState: function() {
      wx.getBackgroundAudioPlayerState({
          success: function(res) {
              console.log(res)
              //duration 总时长
              //currentPosition 当前播放位置
              //status 播放状态
              //downloadPercent 下载状况 100 即为100%
              //dataUrl 当前播放音乐地址
          }
      })
  },
  /** * 监听button暂停按钮 */
  listenerButtonPause: function() {
      wx.pauseBackgroundAudio();
  },
  /** * 设置进度 */
  listenerButtonSeek: function() {
      wx.seekBackgroundAudio({
          position: 30
      })
  },
  /** *停止播放 */
  listenerButtonStop: function() {
      wx.stopBackgroundAudio()
  },

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

    /** * 监听音乐暂停 */
    wx.onBackgroundAudioPause(function() {
        console.log('onBackgroundAudioPause')
    })

    /** * 监听音乐停止 */
    wx.onBackgroundAudioStop(function() {
        console.log('onBackgroundAudioStop')
    })

  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

本文转载自:http://blog.csdn.net/u014360817/article/details/52687330

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
微信小程序端 html2wxml 转换接口 - html2wxml4j

项目介绍 微信小程序端 html2wxml 转换接口 Java版 基于JFinal+Jsoup 实现功能 目前仅实现解析Html并转换成JSON,将生成的JSON通过接口访问返回给微信小程序端, 微信小程序端使用html2wxml...

山东-小木
08/06
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
08/27
0
0
微信小程序 Html2Wxml4J 0.95 更新,支持 Video 和 Audio 解析

html2wxml4J是微信小程序前端html渲染组件html2wxml的后台接口Java版 本次更新内容: 【新增】Video视频标签解析 支持html5中Video标签大部分属性 支持自动播放 支持静音播放 【新增】Audio...

山东-小木
08/07
0
3
走路带疯/wx_yq_mall

微信小程序商城【wxyqmall】 微信小程序商城,微信小程序微店,长期维护版本,欢迎大家踊跃提交贡献代码; 参与开发 更多项目请关注 https://gitee.com/TengWeiYun。 小程序开发 [微信:hq5...

走路带疯
08/31
0
0
"口令红包"-利用函数计算构建微信小程序的server端

前言 函数计算 阿里云函数计算是一个事件驱动的全托管计算服务。通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传。函数计算会为您准备好计算资源,以弹性、可靠的方式运行您的...

rsong
02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

理解数据库的4种隔离级别

本文转自:http://m.blog.csdn.net/article/details?id=51924963 数据库事务的隔离级别有4种,由低到高分别为Read uncommitted 、Read committed 、Repeatable read 、Serializable 。而且,...

初雪之音
46分钟前
1
0
主流的消息队列MQ比较,详解MQ的4类应用场景

目前主流的MQ 1.ZeroMQ 号称最快的消息队列系统,尤其针对大吞吐量的需求场景。 扩展性好,开发比较灵活,采用C语言实现,实际上只是一个socket库的重新封装,如果做为消息队列使用,需要开发...

游人未归
今天
4
0
React 服务器渲染原理解析与实践

网盘下载地址 React 服务器渲染原理解析与实践 本套课程,讲解了React中SSR技术的整个搭建思路及流程,完整的从原理上讲清楚了SSR的概念,重点在于讲解编写SSR框架遇到的各种知识点,以及细节...

qq__2304636824
今天
4
0
Jenkins使用

clean install -Dmaven.test.skip=true 系统设置 全局工具配置 其他的配置类似 构建项目配置

1713716445
今天
2
0
多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部