導語：
最近的項目中需要提取視頻的音軌，并根據音軌中音頻的大小繪制豎條形波紋，對音視頻處理幾乎空白的我開始了無休止的爬論壇找資料的過程。在經歷了一番痛苦的提取和圖形繪制之后，終于達到了預期的效果，現在對這個提取和繪制的過程進行一個總結。
效果圖
丑陋效果圖.png
實現方案
提取音軌 --> 音軌轉化成NSData --> 削減音頻 --> 獲取采樣值 --> 繪制圖形
具體實現
1、提取音軌
- iOS開發中，AVFoundation提供了大量簡單易用的API可滿足一般需求的多媒體音視頻處理，本次提取音軌主要使用AVAsset和AVAssetTrack兩個類。
AVAsset *asset = [AVAsset assetWithURL:videoUrl]; //獲取文件
AVAssetTrack *track = [[asset tracksWithMediaType:AVMediaTypeAudio] firstObject]; //從媒體中得到聲音軌道
- 上面獲得的track就是提取出來的視頻音軌，接下來要對音軌進行轉化，轉化的目的是為了量化音頻的大小，方便接下來圖形的繪制。
2、音軌轉化成NSData
- 在之前獲得到track之后，對track的數據進行讀取，AVAssetReader可以監聽讀取的狀態，結合AVAssetReaderTrackOutput可以獲得到每一個CMSampleBufferRef，最后，將每一個CMSampleBufferRef轉化成NSData存儲起來就完成了音軌轉化為NSData的過程，越說越暈，看代碼和注釋吧。
NSMutableData *data = [[NSMutableData alloc]init]; //用于保存音頻數據
//讀取配置
NSDictionary *dic = @{AVFormatIDKey :@(kAudioFormatLinearPCM),
AVLinearPCMIsBigEndianKey:@NO, // 小端存儲
AVLinearPCMIsFloatKey:@NO, //采樣信號是整數
AVLinearPCMBitDepthKey :@(16) //采樣位數默認 16
};
NSError *error;
AVAssetReader *reader = [[AVAssetReader alloc] initWithAsset:asset error:&error]; //創建讀取
if (!reader) {
NSLog(@"%@",[error localizedDescription]);
}
//讀取輸出，在相應的軌道上輸出對應格式的數據
AVAssetReaderTrackOutput *output = [[AVAssetReaderTrackOutput alloc]initWithTrack:track outputSettings:dic];
//賦給讀取并開啟讀取
[reader addOutput:output];
[reader startReading];
//讀取是一個持續的過程，每次只讀取后面對應的大小的數據
while (reader.status == AVAssetReaderStatusReading) {
CMSampleBufferRef sampleBuffer = [output copyNextSampleBuffer]; //讀取到數據
if (sampleBuffer) {
CMBlockBufferRef blockBUfferRef = CMSampleBufferGetDataBuffer(sampleBuffer);//取出數據
//返回一個大小，size_t針對不同的平臺有不同的實現，擴展性更好
size_t length = CMBlockBufferGetDataLength(blockBUfferRef);
SInt16 sampleBytes[length];
CMBlockBufferCopyDataBytes(blockBUfferRef, 0, length, sampleBytes); //將數據放入數組
[data appendBytes:sampleBytes length:length]; //將數據附加到data中
CMSampleBufferInvalidate(sampleBuffer);//銷毀
CFRelease(sampleBuffer); //釋放
}
}
if (reader.status == AVAssetReaderStatusCompleted) {
// 讀取結束...
}else{
NSLog(@"獲取音頻數據失敗");
}
削減音頻、獲取采樣值
- 得到轉化后的NSData數據之后，因為獲得的data包含成千上萬的byte，如果對data的每一個byte進行處理，會大大影響手機的處理速度，而且沒有這個必要，因此需要對data進行削減，以減少處理的數量，達到性能上的提升。具體的削減的方式為：將data按照一定的比例縮小成一個一個的小的data包，將每一個data包中的最大值提取出來存入到數組集合中。經過這樣的處理，數組中存放的就是成倍削減后的data了?？创a：
//縮減音頻 (size為將要繪制波紋的view的尺寸，不需要請忽略)
- (NSArray *)cutAudioData:(CGSize)size {
NSMutableArray *filteredSamplesMA = [[NSMutableArray alloc]init];
NSData *data = [self getRecorderDataFromURL:self.url];
NSUInteger sampleCount = data.length / sizeof(SInt16);//計算所有數據個數
NSUInteger binSize = sampleCount / (size.width * 0.1); //將數據分割為一個個小包
SInt16 *bytes = (SInt16 *)self.audioData.bytes; //總的數據個數
SInt16 maxSample = 0; //sint16兩個字節的空間
//以binSize為一個樣本。每個樣本中取一個最大數。也就是在固定范圍取一個最大的數據保存，達到縮減目的
for (NSUInteger i= 0; i < sampleCount; i += binSize) {
//在sampleCount（所有數據）個數據中抽樣，抽樣方法為在binSize個數據為一個樣本，在樣本中選取一個數據
SInt16 sampleBin[binSize];
for (NSUInteger j = 0; j < binSize; j++) {//先將每次抽樣樣本的binSize個數據遍歷出來
sampleBin[j] = CFSwapInt16LittleToHost(bytes[i + j]);
}
//選取樣本數據中最大的一個數據
SInt16 value = [self maxValueInArray:sampleBin ofSize:binSize];
//保存數據
[filteredSamplesMA addObject:@(value)];
//將所有數據中的最大數據保存，作為一個參考?？梢愿鶕闆r對所有數據進行“縮放”
if (value > maxSample) {
maxSample = value;
}
}
//計算比例因子
CGFloat scaleFactor = (size.height * 0.5)/maxSample;
//對所有數據進行“縮放”
for (NSUInteger i = 0; i < filteredSamplesMA.count; i++) {
filteredSamplesMA[i] = @([filteredSamplesMA[i] integerValue] * scaleFactor);
}
return filteredSamplesMA;
}
//比較大小的方法，返回最大值
- (SInt16)maxValueInArray:(SInt16[])values ofSize:(NSUInteger)size {
SInt16 maxvalue = 0;
for (int i = 0; i < size; i++) {
if (abs(values[i] > maxvalue)) {
maxvalue = abs(values[i]);
}
}
return maxvalue;
}
繪制圖形
- 上面的代碼將按比例削減后的音頻的最大值存入到了數組集合中，下面將根據這個數組進行相關的繪制。數組的數量表示豎條形波紋的數量，數組的元素的大小代表條紋的高度大小。但因為有個別元素會出現過大或過小的問題會對繪制的結果產生辣眼睛的影響，這里對元素進行了一次簡單的處理，就是取得數組元素的平均值，超出或不足平均值的元素按照特定的比例進行縮放再與平均值做加或減運算得到要繪制在view上的高度。看代碼：
- (void)setupWithRect:(CGRect)rect {
self.itemArray = [NSMutableArray new];
NSArray *filerSamples = [self cutAudioData:self.bounds.size];//得到繪制數據
self.filerSamples = filerSamples;
self.itemColor = [UIColor colorWithRed:241/255.f green:60/255.f blue:57/255.f alpha:1.0];
self.levelArray = [[NSMutableArray alloc]init];
// 計算音軌數組的平均值
double avg = 0;
int sum = 0;
for (int i = 0; i < self.filerSamples.count; i++) {
sum += [self.filerSamples[i] intValue];
}
avg = sum/self.filerSamples.count;
for(int i = 0 ; i < self.filerSamples.count ; i++){
// 計算每組數據與平均值的差值
int Xi = [self.filerSamples[i] intValue];
CGFloat scale = (Xi - avg)/avg; // 繪制線條的縮放比例
int baseH = 0; // 長度基數, 線條長度范圍: baseH + 10 ~ baseH + 100
if (scale <= -0.4) {
[self.levelArray addObject:@(baseH + 10)];
}else if (scale > -0.4 && scale <= -0.3) {
[self.levelArray addObject:@(baseH + 20)];
}else if (scale > -0.3 && scale <= -0.2) {
[self.levelArray addObject:@(baseH + 30)];
}else if (scale > -0.2 && scale <= -0.1) {
[self.levelArray addObject:@(baseH + 40)];
}else if (scale > -0.1 && scale <= 0) {
[self.levelArray addObject:@(baseH + 50)];
}else if (scale > 0 && scale <= 0.1) {
[self.levelArray addObject:@(baseH + 60)];
} else if (scale > 0.1 && scale <= 0.2) {
[self.levelArray addObject:@(baseH + 70)];
} else if (scale > 0.2 && scale <= 0.3) {
[self.levelArray addObject:@(baseH + 80)];
} else if (scale > 0.3 && scale <= 0.4) {
[self.levelArray addObject:@(baseH + 90)];
} else if (scale > 0.4) {
[self.levelArray addObject:@(baseH + 100)];
}
CAShapeLayer *itemline = [CAShapeLayer layer];
itemline.lineCap = kCALineCapButt;
itemline.lineJoin = kCALineJoinRound;
itemline.strokeColor = [[UIColor clearColor] CGColor];
itemline.fillColor = [[UIColor clearColor] CGColor];
[itemline setLineWidth:rect.size.width*0.4/(self.filerSamples.count)];
itemline.strokeColor = [self.itemColor CGColor];
[self.layer addSublayer:itemline];
[self.itemArray addObject:itemline];
}
}
- 此時，self.itemArray中存放的就是需要繪制在view上的線條，下面只需要遍歷這些線條，并一一繪制在view上即可?？创a：
- (void)updateItemsWithRect:(CGRect)rect
{
UIGraphicsBeginImageContext(self.frame.size);
CGFloat x = rect.size.width*0.8/(self.filerSamples.count); // x：表示兩個線條的間隔
CGFloat z = rect.size.width*0.2/self.filerSamples.count;
CGFloat y = rect.size.width*0.09 - z; // y：表示線條的起始位置
for(int i=0; i < (self.itemArray.count); i++) {
UIBezierPath *itemLinePath = [UIBezierPath bezierPath];
y += x;
CGPoint point = CGPointMake(y, rect.size.height/2+([[self.levelArray objectAtIndex:i]intValue]+1)*z/2);
[itemLinePath moveToPoint:point];
CGPoint toPoint = CGPointMake(y, rect.size.height/2-([[self.levelArray objectAtIndex:i]intValue]+1)*z/2);
[itemLinePath addLineToPoint:toPoint];
CAShapeLayer *itemLine = [self.itemArray objectAtIndex:i];
itemLine.path = [itemLinePath CGPath];
}
UIGraphicsEndImageContext();
}
至此，便結束了全部的提取音軌繪制豎條紋波形的代碼。如有疑問，請聯系：cpf9401@163.com
