默認
打賞 發表評論 8
高仿iOS版手機QQ聊天界面中錄音及振幅動畫完整實現 [源碼下載]
閱讀(18843) | 評論(8 收藏4 淘帖2

1、前言


手機版QQ上的對講、錄音、變聲功能的UI效果相當不錯,功能截圖如下:
高仿iOS版手機QQ聊天界面中錄音及振幅動畫完整實現 [源碼下載]_未標題-1.jpg

本次參考手機QQ的iOS版功能實現,高仿了個系列功能,本次實現的功能:

  • 1)封裝AVAudioRecorder以及AVAudioPlayer實現錄音以及播放功能;
  • 2)實現錄音時的振幅動畫;
  • 3)播放時環形進度條和振幅動畫,以及一些零碎的交互細節;
  • 4)變聲效果;
  • 5)發送時錄音文件的路徑,以及取消發送刪除錄音文件細節都做了。

先上一個本文高仿代碼的運行效果圖:
高仿iOS版手機QQ聊天界面中錄音及振幅動畫完整實現 [源碼下載]_1.gif

2、錄音以及振幅動畫效果的實現思路


錄音我們自己通過封裝AVRecorder實現。振幅動畫的思路:用固定含有10個元素的數組,來表示當前需要顯示的振幅數值,使用一條貝塞爾曲線畫出當前數組的路徑,在CAShapeLayer上做展示。開始錄音時,啟動一個定時器,不間斷獲取音量的分貝值,定時器任務每進行一次,將數組的最后一個元素刪除,最新的分貝添加到數組第一個位置,然后根據數組重新繪制貝塞爾曲線并做展示。重復進行看起來就像在移動一樣。

實現步驟如下。

第1步:獲取錄音的分貝大小(-160dB -- 0dB ,我們把它轉換成0 - 1)
- (float)levels {
    [self.audioRecorder updateMeters];
    double aveChannel = pow(10, (ALPHA * [self.audioRecorder averagePowerForChannel:0]));
    if (aveChannel <= 0.05f) aveChannel = 0.05f;
    if (aveChannel >= 1.0f) aveChannel = 1.0f;
    return aveChannel;
}

第2步:開始一個定時器,按照一定的時間從錄音器獲取分貝大小,并將數組按照上面的規則修改
- (void)updateMeter {
    // 獲取分貝數值
    CGFloat level = [[CWRecorder shareInstance] levels];
    [self.currentLevels removeLastObject];
    [self.currentLevels insertObject:@(level) atIndex:0];
    // 這個allLevels是用來干嘛的?(在當前無關)在下面會說明,自有大用
    [self.allLevels addObject:@(level)];
    // 重繪bezierPath,重新展示
    [self updateLevelLayer];
}

第3步:根據數組,重新描述路徑,并重新展示
- (void)updateLevelLayer {
    self.levelPath = [UIBezierPath bezierPath];
    CGFloat height = CGRectGetHeight(self.levelLayer.frame);
    for (int i = 0; i < self.currentLevels.count; i++) {
        CGFloat x = i * (levelWidth + levelMargin) + 5;
        CGFloat pathH = [self.currentLevels[i] floatValue] * height;
        CGFloat startY = height / 2.0 - pathH / 2.0;
        CGFloat endY = height / 2.0 + pathH / 2.0;
        [_levelPath moveToPoint:CGPointMake(x, startY)];
        [_levelPath addLineToPoint:CGPointMake(x, endY)];
    }
    self.levelLayer.path = _levelPath.CGPath;
}
做完振幅就動起來了,非常簡單。。。在錄音結束的時候 暫停定時器就OK了.

第4步:
因為QQ錄音的振幅是兩邊對稱的,我們將視圖的層級做了一下小小的調整,在中間加入了一個復制圖層CAReplicatorLayer。直接將展示的圖層旋轉180度復制一份。就有了對稱的兩條振幅。


第5步:播放錄音時的振幅動畫如何做?
錄音時我們能獲取當前錄音的分貝,但是播放的時候,不能獲取播放的錄音當前分貝(我暫時無力獲取)怎么辦?我這邊采取的方式就是在錄音的時候把展示過的分貝值都保存起來,就是上面第二塊代碼中的allLevels。。在結束錄音的時候將這個數組保存在一個單例的模型內,播放的時候直接在這個模型內取出該分貝數據,實現方式就是重復步驟2了。

3、變聲如何實現?


變聲這塊我粗略的實現了一下,使用到了一個第三方框架 SoundTouch。最后,如果要作為一個真正能使用到聊天內的錄音,錄制的語音格式我們需要從wav轉成amr,有兩點好處,一個是占有內存小,另外一個是兼容安卓,這個也有一個常用的框架AudioConvert,其他的一些細節就不多說了。。。

4、源碼附件下載


QQVoiceDemo(52im.net).zip (945.7 KB , 下載次數: 23 , 售價: 3 金幣)

附錄:全站精品資源下載


[1] 精品源碼下載:
Java NIO基礎視頻教程、MINA視頻教程、Netty快速入門視頻 [有源碼]
輕量級即時通訊框架MobileIMSDK的iOS源碼(開源版)[附件下載]
開源IM工程“蘑菇街TeamTalk”2015年5月前未刪減版完整代碼 [附件下載]
微信本地數據庫破解版(含iOS、Android),僅供學習研究 [附件下載]
NIO框架入門(四):Android與MINA2、Netty4的跨平臺UDP雙向通信實戰 [附件下載]
NIO框架入門(三):iOS與MINA2、Netty4的跨平臺UDP雙向通信實戰 [附件下載]
NIO框架入門(二):服務端基于MINA2的UDP雙向通信Demo演示 [附件下載]
NIO框架入門(一):服務端基于Netty4的UDP雙向通信Demo演示 [附件下載]
用于IM中圖片壓縮的Android工具類源碼,效果可媲美微信 [附件下載]
高仿Android版手機QQ可拖拽未讀數小氣泡源碼 [附件下載]
一個WebSocket實時聊天室Demo:基于node.js+socket.io [附件下載]
Android聊天界面源碼:實現了聊天氣泡、表情圖標(可翻頁) [附件下載]
高仿Android版手機QQ首頁側滑菜單源碼 [附件下載]
開源libco庫:單機千萬連接、支撐微信8億用戶的后臺框架基石 [源碼下載]
分享java AMR音頻文件合并源碼,全網最全
微信團隊原創Android資源混淆工具:AndResGuard [有源碼]
一個基于MQTT通信協議的完整Android推送Demo [附件下載]
Android版高仿微信聊天界面源碼 [附件下載]
高仿手機QQ的Android版鎖屏聊天消息提醒功能 [附件下載]
高仿iOS版手機QQ錄音及振幅動畫完整實現 [源碼下載]
仿微信的IM聊天時間顯示格式(含iOS/Android/Web實現)[圖文+源碼]

[2] 精品文檔和工具下載:
計算機網絡通訊協議關系圖(中文珍藏版)[附件下載]
史上最全即時通訊軟件簡史(精編大圖版)[附件下載]
基于RTMP協議的流媒體技術的原理與應用(技術論文)[附件下載]
獨家發布《TCP/IP詳解 卷1:協議》CHM版 [附件下載]
良心分享:WebRTC 零基礎開發者教程(中文)[附件下載]
MQTT協議手冊(中文翻譯版)[附件下載]
經典書籍《UNIX網絡編程》最全下載(卷1+卷2、中文版+英文版)[附件下載]
音視頻開發理論入門書籍之《視頻技術手冊(第5版)》[附件下載]
國際電聯H.264視頻編碼標準官方技術手冊(中文版)[附件下載]
Apache MINA2.0 開發指南(中文版)[附件下載]
網絡通訊數據抓包和分析工具 Wireshark 使用教程(中文) [附件下載]
最新收集NAT穿越(p2p打洞)免費STUN服務器列表 [附件下載]
高性能網絡編程經典:《The C10K problem(英文)》[附件下載]
即時通訊系統的原理、技術和應用(技術論文)[附件下載]
技術論文:微信對網絡影響的技術試驗及分析[附件下載]
華為內部3G網絡資料: WCDMA系統原理培訓手冊[附件下載]
網絡測試:Android版多路ping命令工具EnterprisePing[附件下載]
Android反編譯利器APKDB:沒有美工的日子里繼續堅強的擼
一款用于P2P開發的NAT類型檢測工具 [附件下載]
兩款增強型Ping工具:持續統計、圖形化展式網絡狀況 [附件下載]

[3] 精選視頻、演講PPT下載:
QQ空間移動端10億級視頻播放技術優化揭秘(視頻+PPT)[附件下載]
RTC實時互聯網2017年度大會精選演講PPT [附件下載]
微信分享開源IM網絡層組件庫Mars的技術實現(視頻+PPT)[附件下載]
微服務理念在微信海量用戶后臺架構中的實踐(視頻+PPT)[附件下載]
移動端IM開發和構建中的技術難點實踐分享(視頻+PPT)[附件下載]
網易云信的高品質即時通訊技術實踐之路(視頻+PPT)[附件下載]
騰訊音視頻實驗室:直面音視頻質量評估之痛(視頻+PPT)[附件下載]
騰訊QQ1.4億在線用戶的技術挑戰和架構演進之路PPT[附件下載]
微信朋友圈海量技術之道PPT[附件下載]
手機淘寶消息推送系統的架構與實踐(音頻+PPT)[附件下載]
如何進行實時音視頻的質量評估與監控(視頻+PPT)[附件下載]
Go語言構建高并發消息推送系統實踐PPT(來自360公司)[附件下載]
網易IM云千萬級并發消息處理能力的架構設計與實踐PPT [附件下載]
手機QQ的海量用戶移動化實踐分享(視頻+PPT)[附件下載]
釘釘——基于IM技術的新一代企業OA平臺的技術挑戰(視頻+PPT)[附件下載]
微信技術總監談架構:微信之道——大道至簡(PPT講稿)[附件下載]
Netty的架構剖析及應用案例介紹(視頻+PPT)[附件下載]
聲網架構師談實時音視頻云的實現難點(視頻采訪)
滴滴打車架構演變及應用實踐(PPT講稿)[附件下載]
微信海量用戶背后的后臺系統存儲架構(視頻+PPT)[附件下載]
在線音視頻直播室服務端架構最佳實踐(視頻+PPT)[附件下載]
從0到1:萬人在線的實時音視頻直播技術實踐分享(視頻+PPT)[附件下載]
微信移動端應對弱網絡情況的探索和實踐PPT[附件下載]
Android版微信從300KB到30MB的技術演進(PPT講稿)[附件下載]

即時通訊網 - 即時通訊開發者社區! 來源: - 即時通訊開發者社區!

上一篇:Java NIO基礎視頻教程、MINA視頻教程、Netty快速入門視頻 [網盤下載]下一篇:YY直播在移動弱網環境下的深度優化實踐分享(視頻+PPT)[附件下載]

本帖已收錄至以下技術專輯

推薦方案
評論 8
這個網站內容真的都是干貨
簽名: 不停的學習
引用:金陵笑笑笙 發表于 2018-02-06 07:35
這個網站內容真的都是干貨

那必須的。。
簽名: 《拿起鍵盤就是干:跟我一起徒手開發一套分布式IM系統》:http://www.emxvra.tw/thread-2775-1-1.html
很厲害的樣子 下來看看
&#128516;,大大的干貨呀
這是好東西,必須收藏
提示: 該帖被管理員或版主屏蔽
目測下載了 運行不起來
引用:xixi 發表于 2018-12-12 14:18
目測下載了 運行不起來

都是源碼,如果是開發工具問題,就自已新開工程把源碼復制進去搞
簽名: 《拿起鍵盤就是干:跟我一起徒手開發一套分布式IM系統》:http://www.emxvra.tw/thread-2775-1-1.html
打賞樓主 ×
使用微信打賞! 使用支付寶打賞!

返回頂部
777彩票走势图表