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://upload-images.jianshu.io/upload_images/14216764-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组件的属性中设置。创建了音频上下文就可以在需要的时候使用其中的函数了。
