1、案例描述

下山.jpeg

2、实现过程

2.1、代码展示

• wxml

<!--pages/kj/demo111-template/index.wxml-->
<view class="box">
  <view class="title">音频展示</view>
  <audio src="{{source}}" id="audio_1" controls="true" loop="true" poster="{{poster_add}}" name="{{audio_name}}" author="{{audio_author}}"></audio>

  <view class="button_all">
    <button class="audio_b audio_b1" bindtap="play">play</button>
    <button class="audio_b audio_b2" bindtap="stop">stop</button>
    <input class="input_time"
    type="number" placeholder="请输入要跳转的时间" bindblur="input_time"/>
    <button class="audio_b" bindtap="again">again</button>
  </view>
</view>

• wxss

/* pages/kj/demo111-template/index.wxss */
.button_all{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.audio_b{
    width: 200px;
    height: 50px;
    margin: 10px;
}
.audio_b1{
    background-color: green;
}
.audio_b2{
    background-color: blue;
}
.input_time{
    margin: 10px;
}

• js

// pages/kj/demo111-template/index.js
var source = 'http://dl.stream.qqmusic.qq.com/C400000jLuG841aXgE.m4a?guid=9294649132&vkey=498FFDF0EE797C1C290E04BB2CB4CAB27321031C1FE896A64196A85F42819AFD3A8A1792CF40AC77875DE9B1C6A78264D72ABFE96B98A5FC&uin=1125218970&fromtag=66';
var poster_add = 'https://img.haomeiwen.com/i14216764/4e3b0d9e89e677c4.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240';
var audio_name = '下山';
var audio_author = '麦兜';
var audio_context = '';


Page({
  data: {
    source : source,
    poster_add : poster_add,
    audio_name : audio_name,
    audio_author : audio_author
  },
  onLoad: function(options){
    audio_context = wx.createAudioContext('audio_1');
  },
  play:function(){
    audio_context.play();
  },
  stop:function(){
    audio_context.pause();
  },
  input_time:function(e){
    audio_context.seek(e.detail.value);
  },
  again: function(){
    audio_context.seek(0);
  }
})

2.2、结果展示

结果展示.png

3、知识汇总

知识要点.png audio音频组件属性说明.png audio音频组件属性续表.png 创建音频上下文.png 音频上下文对象具有的函数.png

4、踩坑说明

• API函数更新 API函数更新.png

  虽然组件api已经更新，但是之前api的函数都还能用。

• 音频属性一旦设置了播放路径，就可以直接点击播放和暂停，但是要直接跳转到播放位置，这些属性就做不到了。这时就要用到音频的api接口函数了。要使用音频api函数就要在js的页面加载之时使用wx.creatAudioContext(id),其中id是对应音频的标识，在audio组件的属性中设置。创建了音频上下文就可以在需要的时候使用其中的函数了。