微信小程序音频直播开发源码

　　小编发现大家对于微信小程序商店介绍过的小程序直播很感兴趣，尤其是微信小程序音频直播。音频直播要怎么进行开发呢?其实它的开发步骤和之前的音频播放如出一辙，直接上代码好了：

　　index.wxml

　　系统复习

　　难点突破

　　统计

　　{{music_name}} - {{author}}

　　{{starttime}}

　　{{duration}}

　　这里是难点页面

　　这里是统计页面

　　index.wxss

　　/**index.wxss**/

　　.mycontent{padding:10rpx 0 ;}

　　.swiper-tab{

　　width:100%;text-align: center;line-height: 80rpx;

　　}

　　.swiper-tab-list{

　　font-size: 30rpx;display: inline-block;width:33.33%;color: #777777;

　　}

　　.on{color:#333;border-bottom: 5rpx solid #78CA5C;}

　　.swiper-box{display:block;height: 100%;width: 100%;overflow: hidden;}

　　.swiper-box view {text-align: center;}

　　.stop-icon{width:100px;height: 100px;margin:30rpx auto;border-radius: 50%;border:3rpx solid #ccc;}

　　.cat-name{padding:20rpx 0; }

　　.pro{width:90%;margin:0 auto;}

　　.proleft{width:20%;}

　　.proright {width: 20%;}

　　.procenter{width:50%;}

　　.proleft,.procenter,.proright{display: inline-block;}

　　js代码：

　　//index.js

　　//获取应用实例

　　var app = getApp()

　　Page({

　　data: {

　　motto: 'Hello World',

　　userInfo: {},

　　winWidth:0,

　　winHeight:0,

　　currentTab:0,

　　cdrom:'../../resources/kind/play.png',

　　// music:'D:/web/testxcx/resources/audio/001.mp3',

　　cdrompause: '../../resources/kind/pause.png',

　　playAction:'audioPlay',

　　starttime:'00:00',

　　duration:'05:00'

　　},

　　//小程序事件处理函数

　　bindViewTap: function() {

　　wx.navigateTo({

　　url: '../logs/logs'

　　})

　　},

　　onLoad: function () {

　　console.log('onLoad')

　　var that = this

　　this.audioCtx = wx.createAudioContext('myAudio')

　　//调用应用实例的方法获取全局数据

　　app.getUserInfo(function(userInfo){

　　//更新数据

　　that.setData({

　　userInfo:userInfo,

　　text:'111111'

　　})

　　});

　　//获取系统信息

　　wx.getSystemInfo({

　　success: function(res) {

　　that.setData(

　　{

　　winWidth:res.windowWidth,

　　winHeight:res.windowHeight

　　}

　　);

　　}

　　});

　　//测试异步请求

　　wx.request({

　　url: 'test/xcx.php',

　　data:{},

　　success:function(msg){

　　that.setData(

　　{

　　music_name: msg.data.music_name,

　　author: msg.data.author,

　　music:msg.data.music_url

　　}

　　);

　　}

　　});

　　},

　　/**

　　* 滑动切换tab

　　*/

　　bindChange:function(e){

　　var that = this;

　　that.setData({currentTab:e.detail.current});

　　},

　　/**

　　* @desc 小程序点击切换

　　*

　　*/

　　swichNav:function(e){

　　var that = this ;

　　if(this.data.currentTab === e.target.dataset.current){

　　return false;

　　}else{

　　that.setData({

　　currentTab:e.target.dataset.current

　　})

　　}

　　},

　　/**

　　* @author weizenghui

　　* @version 1.0

　　* @desc 播放按钮

　　*/

　　audioPlay:function(){

　　var that = this ;

　　this.audioCtx.play();

　　that.setData({

　　playAction: 'audioPause',

　　cdrom: '../../resources/kind/pause.png'

　　})

　　},

　　/**

　　* @desc 停止按钮

　　*

　　*/

　　audioPause: function () {

　　var that = this;

　　this.audioCtx.pause();

　　that.setData({

　　playAction: 'audioPlay',

　　cdrom: '../../resources/kind/play.png'

　　})

　　},

　　/**

　　* @desc 播放进度触发

　　*

　　*/

　　funtimeupdate:function(e){

　　var offset = e.detail.currentTime;

　　var currentTime = parseInt(e.detail.currentTime);

　　var min = parseInt(currentTime / 60 );

　　var max = parseInt(e.detail.duration);

　　var sec = currentTime % 60 ;

　　var starttime = min + ':' + sec ;

　　var duration = e.detail.duration;

　　var offset = parseInt (offset * 100 / duration);

　　var that = this;

　　that.setData({

　　offset: currentTime,

　　starttime: starttime,

　　max:max

　　})

　　},

　　/**

　　* @desc 拖动进度条

　　*

　　*/

　　sliderchange:function(e){

　　console.log(e);

　　var offset = parseInt( e.detail.value );

　　this.audioCtx.seek(offset);

　　},

　　/**

　　* @desc 当播放完毕时请求下一个音频

　　* @author

　　*/

　　funended:function(e){

　　var that = this;

　　//this.audioCtx.pause();

　　wx.request({

　　url: 'test/xcx.php?next=1',

　　data: {},

　　success: function (msg) {

　　that.setData(

　　{

　　music_name: msg.data.music_name,

　　author: msg.data.author,

　　music: msg.data.music_url

　　}

　　);

　　that.audioCtx.setSrc(msg.data.music_url);

　　that.audioCtx.play();

　　}

　　});

　　}

　　})

　　复制以上的代码，你就可以进行微信小程序音频直播的开发了，怎么样，是不是很简单呢?相信大家都能很快掌握并爱上这项新的小程序功能。

　　微信小程序直播系统怎么做，制作小程序直播系统分为哪几个部分?

　　第一个微信小程序语音直播具体介绍

　　小程序怎么开放个人直播?