欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小程序开发之媒体组件(audio)

程序员文章站 2022-06-14 21:11:50
...

效果图

小程序开发之媒体组件(audio)

属性

参考:audio

实例

  1. app.js
//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})
  1. app.json
{
  "pages": [
    "pages/audio/audio"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
  1. audio.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
      }
    })
  }
})
  1. audio.json
{
  "navigationBarTitleText": "audio组件"
}
  1. audio.wxml
<audio
    action="{{action}}"
    src='http://music.163.com/song/media/outer/url?id=1293886117.mp3'
    poster= 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582439550062&di=ae1b094eefa18f580c6444155051b038&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ff66ccb39141487dda7af91ab13c40be76afa4c41.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>
  1. audio.wxss
.audio_title {
  margin-top: 50rpx;
  margin-left: 50rpx;
}
audio{
  margin-top: 10rpx;
  margin-left: 50rpx;
  width: 90%
}
slider{
  margin-top: 10rpx;
  margin-left: 50rpx;
  width: 90%
}
button{
  margin: 20rpx;
}
相关标签: 小程序