微信小程序把玩(二十七)audio组件

简介: 原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml 播放 暂停 调为1倍速 调为0.
原文: 微信小程序把玩(二十七)audio组件

这里写图片描述

音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用)

主要属性:

这里写图片描述
这里写图片描述

这里写图片描述

这里写图片描述

wxml

<audio
    action="{{action}}"
    src='http://sc1.111ttt.com/2016/1/09/26/202261732256.mp3'
    poster= 'http://avatar.csdn.net/E/3/9/1_u014360817.jpg'
    controls="true"
    name="钢琴曲"
    author="不详"/>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<!--正常速度-->
<button type="primary" bindtap="audioPlaybackRateNormal">调为1倍速</button>
<!--慢放-->
<button type="primary" bindtap="audioPlaybackRateSlowDown">调为0.5倍速</button>

js

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

  audioPlay:function() {
    this.setData({
     action: {
       method: 'play'
     }
   })
  },
 audioPause:function(){
   this.setData({
     action: {
       method: 'pause'
     }
   })
 },
 audioPlaybackRateNormal:function() {
   this.setData({
     action:{
       method: 'setPlaybackRate',
       data: 1
     }
   })
 },
audioPlaybackRateSlowDown:function() {
  this.setData({
    action: {
      method: 'setPlaybackRate',
      data: 0.5
    }
  })
}
})

目录
相关文章
|
15天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
1月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
1月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
1月前
|
JSON 资源调度 小程序
一个强大的小程序富文本组件mp-html
一个强大的小程序富文本组件mp-html
23 0
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
|
11天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
11天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
11天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
11天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。

热门文章

最新文章