zoukankan      html  css  js  c++  java
  • 十:audio 音频

    属性名类型默认值说明
    id String
     
    video 组件的唯一标识符
    src String
     
    要播放音频的资源地址
    loop Boolean false 是否循环播放
    controls Boolean true 是否显示默认控件
    poster String
     
    默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
    name String 未知音频 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
    author String 未知作者 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
    binderror EventHandle
     
    当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
    bindplay EventHandle
     
    当开始/继续播放时触发play事件
    bindpause EventHandle
     
    当暂停播放时触发 pause 事件
    bindtimeupdate EventHandle
     
    当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
    bindended EventHandle
     
    当播放到末尾时触发 ended 事件
    这是标签audio的一些属性。。如果当。audio出现错误的时候 如 binderror:function(e){}这个方法时 e.detail.errMsg会报如下错误。
    返回错误码描述
    MEDIA_ERR_ABORTED 获取资源被用户禁止
    MEDIA_ERR_NETWORD 网络错误
    MEDIA_ERR_DECODE 解码错误
    MEDIA_ERR_SRC_NOT_SUPPOERTED 不合适资源
    例外 audio 还有一个是 action 属性,这个属性接受的参数 是一个object类型。他有两个值是:method 和 data 
    method描述data
    play 播放
     
    pause 暂停
     
    setPlaybackRate 调整速度 倍速
    setCurrentTime 设置当前时间 播放时间
    另外audio还可可以创建并返回上下文的audioContext对象。。。前端的童鞋可以把他理解成 getElementById。
    他的调用方法是  wx.createAudioContext(audioId) 他的方法则如下。
    方法参数说明
    play 播放
    pause 暂停
    seek position(number) 跳转到指定位置,单位 s
    /* ---page/test/test.wxml----*/
     
    <audio  id="myAudio" 
            poster="{{poster}}" 
            name="{{name}}" 
            author="{{author}}" 
            src="{{src}}"  
            controls loop
            bindplay="audiobindplay"
            bindpause="audiobindpause"
            bindtimeupdate="audiobindtimeupdate"
            bindended="audiobindended"
            binderror="audiobinderror"></audio>
     
    <button type="primary" bindtap="audioPlay">播放</button>
    <button type="primary" bindtap="audioPause">暂停</button>
    <button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
     
    /* ---page/test/test.wxml----*/
     
    /* ---page/test/test.js----*/
     
    // audio.js
    Page({
      onReady: function (e) {
        // 使用 wx.createAudioContext 获取 audio 上下文 context
        this.audioCtx = wx.createAudioContext('myAudio')
      },
      data: {
        name: '此时此刻'//歌曲名称
        author: '许巍',   //作者名称
      },
      //以下是 js的api
      audioPlay: function () {
        this.audioCtx.play()
      },
      audioPause: function () {
        this.audioCtx.pause()
      },
      audio14: function () {
        this.audioCtx.seek(14)
      },
      //以下是audio的属性。
      audiobindplay:function(e){
        console.log("音频开始播放")
      },
      audiobindpause:function(e){
        console.log("音频暂停中")
      },
      audiobindtimeupdate:function(e){
        console.log("修改了当前的播放时间。")
      },
      audiobindended:function(e){
        console.log("音频播放结束")
      },
      audiobinderror:function(e){
        console.log("音频出错了。 ",e.detail.errMsg)
      }
    })
     
    /* ---page/test/test.js----*/    
    那么主要注意的是  audiobindtimeupdate 这个方法 他并不是用户修改了当前播放时间才执行,而是音乐在播放的时候他都会执行N次。具体执行一下就好了。
     
     
  • 相关阅读:
    redis报错io.lettuce.core.RedisCommandTimeoutException: Command timed out after
    showloading showtoast一起用
    uniapp,mpvue微信,支付宝兼容性说明
    uniapp 自定义组件
    Vue 函数式组件 functional
    mac uninstall node ,npm from official
    mpvue问题记录:组件方法执行机制
    linux 文件 分割重组
    MySql日期操作
    .NET Core连接数据库
  • 原文地址:https://www.cnblogs.com/dandingjun/p/6088229.html
Copyright © 2011-2022 走看看