文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 314
阅读 6
收藏 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...

山东-小木
2018/08/06
0
0
微信小程序 Html2Wxml4J 0.95 更新,支持 Video 和 Audio 解析

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

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

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

xzavier
2018/08/27
0
0
小程序 大假期,技术猿国庆假期的正确打开方式…

明天(10月1日)就是国庆黄金7天假了。作为技术猿,除了美美的睡一觉好像也没啥别的事了。与其窝在家里玩手机刷朋友圈,不如做个小程序玩玩。 微信小程序开发正当时,没有内测资格不要紧。这...

凝小紫
2016/09/30
5.7K
11
利用“花生壳”解决微信小程序开发环境的网络访问难题

利用“花生壳”解决微信小程序开发环境的网络访问难题 问题的由来: 绝大部分微信小程序应用都需要提交、请求网络数据。例如:微信小程序点餐系统,需要向后台服务提交订单信息;微信小程序商...

zhaidp_java
2018/08/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
3
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
1
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
1
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
3
0
跟我学Spring Cloud(Finchley版)-15-Hystrix监控详解

Hystrix提供了监控Hystrix Command的能力,本节来详细探讨。 监控端点与数据 应用整合Hystrix,同时应用包含spring-boot-starter-actuator 依赖,就会存在一个/actuator/hystrix.stream 端点...

周立_ITMuch
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部