Home  >  Article  >  WeChat Applet  >  How to use wx.createInnerAudioContext in WeChat applet?

How to use wx.createInnerAudioContext in WeChat applet?

青灯夜游
青灯夜游forward
2020-04-16 09:28:5310518browse

How to use wx.createInnerAudioContext in WeChat applet? The following article will introduce to you the use of wx.createInnerAudioContext. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How to use wx.createInnerAudioContext in WeChat applet?

Baidu, many are using createAudioContextFor using createInnerAudioContext There are relatively few, but it says an upgraded version, so after thinking about it, I decided to use createInnerAudioContext which is better

The wxml code is as follows: ## The code of #

<!--当前为停止状态  -->
<view style="width:250rpx;height:250rpx;left:250rpx;top:12rpx;position:relative;" wx:if="{{isplay==false}}" bindtap=&#39;play&#39;>
  <image style="width:100%;height:100%;border-radius:50%;" src=&#39;http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39; />
  <image src=&#39;../image/play.png&#39; style="width:100rpx;height:100rpx;position:absolute;left:75rpx;top:75rpx;"></image>
</view>
<!--当前为播放状态  -->
<view style="width:250rpx;height:250rpx;left:250rpx;top:12rpx;position:relative;" wx:if="{{isplay==true}}" bindtap=&#39;stop&#39;>
  <image style="width:100%;height:100%;border-radius:50%;" src=&#39;http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39; />
  <image src=&#39;../image/stop.png&#39; style="width:100rpx;height:100rpx;position:absolute;left:75rpx;top:75rpx;"></image>
</view>
<slider style="width:500rpx;margin-left:125rpx;"></slider>

js is as follows:

const myaudio = wx.createInnerAudioContext();
Page({
 
  data: {
    isplay: false,//是否播放
  },
  onShow: function () {
    myaudio.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46"
 
  },
  //播放
  play: function () {
 
    myaudio.play();
    console.log(myaudio.duration);
    this.setData({ isplay: true });
  },
  // 停止
  stop: function () {
    myaudio.pause();
    this.setData({ isplay: false });
  }
 
 
 
})

That’s almost it. This is the simplest, so the interface is probably like this:

How to use wx.createInnerAudioContext in WeChat applet?

Almost That’s it, the simplest function is actually available on the official website, so it is still recommended to use the official website’s documentation:

Official Website Portal

Recommendation: "

小program Development Tutorial

The above is the detailed content of How to use wx.createInnerAudioContext in WeChat applet?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete