欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)錄音功能

 更新時間:2019年11月22日 17:17:43   作者:煥想  
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)錄音功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序錄音功能的具體代碼,供大家參考,具體內(nèi)容如下

release.wxml

<!--pages/index/release/release.wxml-->
<scroll-view>
 <view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;">
 <block wx:for="{{voices}}">
  <view class="board">
  <view class="cell">
   <view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay">
   <view class="date">存儲路徑:{{item.filePath}}</view>
   <view class="date">存儲時間:{{item.createTime}}</view>
   <view class="date">音頻大小:{{item.size}}KB</view>
   </view>
 
  </view>
  </view>
 </block>
 </view>
</scroll-view>
 
<view wx:if="{{isSpeaking}}" class="microphone">
 <image class="sound-style" src="/images/speak.png"></image>
 <image wx:if="{{j==2}}" class="sound-style" src="/images/speak.png"></image>
 <image wx:if="{{j==3}}" class="sound-style" src="/images/speak.png"></image>
 <image wx:if="{{j==4}}" class="sound-style" src="/images/speak.png"></image>
 <image wx:if="{{j==5}}" class="sound-style" src="/images/speak_end.png"></image>
</view>
<view class="record-style">
 <button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 錄音</button>
</view>

release.wxss

/* pages/index/release/release.wxss */
.microphone{ 
 position:fixed;
 left: 250rpx;
 bottom: 0;
 height: 240rpx; 
 width: 240rpx; 
 border-radius: 20rpx; 
 margin: 50% auto; 
 background: #26A5FF; 
} 
.item-style{ 
 margin-top: 30rpx; 
 margin-bottom: 30rpx; 
} 
.text-style{ 
 text-align: center; 
 
} 
.record-style{ 
 position: fixed; 
 bottom: 0; 
 left: 0; 
 height: 120rpx; 
 width: 100%; 
} 
.btn-style{ 
 margin-left: 30rpx; 
 margin-right: 30rpx; 
} 
 
.sound-style{ 
 position: absolute; 
 width: 74rpx; 
 height:150rpx; 
 margin-top: 45rpx; 
 margin-left: 83rpx; 
} 
 
 
.board { 
 overflow: hidden; 
 border-bottom: 2rpx solid #26A5FF; 
} 
/*列布局*/ 
.cell{ 
 display: flex; 
 margin: 20rpx; 
} 
.cell-hd{ 
 margin-left: 10rpx; 
 color: #885A38; 
} 
.cell .cell-bd{ 
 flex:1; 
 position: relative; 
  
} 
/**只顯示一行*/ 
.date{ 
 font-size: 30rpx; 
 text-overflow: ellipsis; 
 white-space:nowrap; 
 overflow:hidden; 
} 

release.js

// pages/index/release/release.js
var app = getApp()
Page({
 data: {
 j: 1,//幀動畫初始圖片 
 isSpeaking: false,//是否正在說話 
 voices: [],//音頻數(shù)組 
 },
 onLoad: function () {
 },
 //手指按下 
 touchdown: function () {
 console.log("手指按下了...")
 console.log("new date : " + new Date)
 var _this = this;
 speaking.call(this);
 this.setData({
  isSpeaking: true
 })
 //開始錄音 
 wx.startRecord({
  success: function (res) {
  //臨時路徑,下次進入小程序時無法正常使用 
  var tempFilePath = res.tempFilePath
  console.log("tempFilePath: " + tempFilePath)
  //持久保存 
  wx.saveFile({
   tempFilePath: tempFilePath,
   success: function (res) {
   //持久路徑 
   //本地文件存儲的大小限制為 100M 
   var savedFilePath = res.savedFilePath
   console.log("savedFilePath: " + savedFilePath)
   }
  })
  wx.showToast({
   title: '恭喜!錄音成功',
   icon: 'success',
   duration: 1000
  })
  //獲取錄音音頻列表 
  wx.getSavedFileList({
   success: function (res) {
   var voices = [];
   for (var i = 0; i < res.fileList.length; i++) {
    //格式化時間 
    var createTime = new Date(res.fileList[i].createTime)
    //將音頻大小B轉(zhuǎn)為KB 
    var size = (res.fileList[i].size / 1024).toFixed(2);
    var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size };
    console.log("文件路徑: " + res.fileList[i].filePath)
    console.log("文件時間: " + createTime)
    console.log("文件大小: " + size)
    voices = voices.concat(voice);
   }
   _this.setData({
    voices: voices
   })
   }
  })
  },
  fail: function (res) {
  //錄音失敗 
  wx.showModal({
   title: '提示',
   content: '錄音的姿勢不對!',
   showCancel: false,
   success: function (res) {
   if (res.confirm) {
    console.log('用戶點擊確定')
    return
   }
   }
  })
  }
 })
 },
 //手指抬起 
 touchup: function () {
 console.log("手指抬起了...")
 this.setData({
  isSpeaking: false,
 })
 clearInterval(this.timer)
 wx.stopRecord()
 },
 //點擊播放錄音 
 gotoPlay: function (e) {
 var filePath = e.currentTarget.dataset.key;
 //點擊開始播放 
 wx.showToast({
  title: '開始播放',
  icon: 'success',
  duration: 1000
 })
 wx.playVoice({
  filePath: filePath,
  success: function () {
  wx.showToast({
   title: '播放結(jié)束',
   icon: 'success',
   duration: 1000
  })
  }
 })
 }
})
//麥克風(fēng)幀動畫 
function speaking() {
 var _this = this;
 //話筒幀動畫 
 var i = 1;
 this.timer = setInterval(function () {
 i++;
 i = i % 5;
 _this.setData({
  j: i
 })
 }, 200);
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript實現(xiàn)自定義拖拽排序列表

    JavaScript實現(xiàn)自定義拖拽排序列表

    在Web開發(fā)中,拖拽排序是一個常見的需求,它允許用戶通過拖拽的方式重新排列列表項的順序,本文將介紹如何使用原生JavaScript實現(xiàn)這一功能,需要的可以了解下
    2024-01-01
  • js中判斷兩個數(shù)組對象是否完全相等

    js中判斷兩個數(shù)組對象是否完全相等

    這篇文章主要介紹了js中判斷兩個數(shù)組對象是否完全相等方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • js 判斷js函數(shù)、變量是否存在的簡單示例代碼

    js 判斷js函數(shù)、變量是否存在的簡單示例代碼

    本篇文章主要是對判斷js函數(shù)、變量是否存在的簡單示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-03-03
  • JavaScript表單通過正則表達式驗證電話號碼

    JavaScript表單通過正則表達式驗證電話號碼

    通過正則表達式實現(xiàn)判斷一個輸入量是否為電話號碼,需要的朋友可以參考下
    2014-03-03
  • 一文詳解JavaScript的轉(zhuǎn)碼方式

    一文詳解JavaScript的轉(zhuǎn)碼方式

    JavaScript 轉(zhuǎn)碼是指將 JavaScript 代碼從一種編碼方式轉(zhuǎn)換為另一種編碼方式,常見的轉(zhuǎn)碼方式包括 URL 編碼和 Base64 編碼,解碼是前端比較常見的一種操作,本文就給大家講講JavaScript轉(zhuǎn)碼方式
    2023-09-09
  • webpack開發(fā)跨域問題解決辦法

    webpack開發(fā)跨域問題解決辦法

    本篇文章主要介紹了webpack開發(fā)跨域問題解決辦法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • 微信小程序?qū)崿F(xiàn)手勢滑動效果

    微信小程序?qū)崿F(xiàn)手勢滑動效果

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)手勢滑動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • Javascript原生ajax請求代碼實例

    Javascript原生ajax請求代碼實例

    這篇文章主要介紹了Javascript原生ajax請求代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-02-02
  • JS 實現(xiàn)分頁打印功能

    JS 實現(xiàn)分頁打印功能

    這篇文章主要介紹了JS 實現(xiàn)分頁打印功能的相關(guān)資料,需要的朋友可以參考下
    2018-05-05
  • js獲得頁面的高度和寬度的方法

    js獲得頁面的高度和寬度的方法

    做一個彈出dialog時用到了取父頁面的寬度和高度的方法,需要的朋友可以參考下
    2014-02-02

最新評論