iOS 提取音軌繪制條形波紋

導(dǎo)語:

最近的項(xiàng)目中需要提取視頻的音軌,并根據(jù)音軌中音頻的大小繪制豎條形波紋,對(duì)音視頻處理幾乎空白的我開始了無休止的爬論壇找資料的過程。在經(jīng)歷了一番痛苦的提取和圖形繪制之后,終于達(dá)到了預(yù)期的效果,現(xiàn)在對(duì)這個(gè)提取和繪制的過程進(jìn)行一個(gè)總結(jié)。

效果圖

丑陋效果圖.png

實(shí)現(xiàn)方案

提取音軌 --> 音軌轉(zhuǎn)化成NSData --> 削減音頻 --> 獲取采樣值 --> 繪制圖形

具體實(shí)現(xiàn)

1、提取音軌
  • iOS開發(fā)中,AVFoundation提供了大量簡(jiǎn)單易用的API可滿足一般需求的多媒體音視頻處理,本次提取音軌主要使用AVAsset和AVAssetTrack兩個(gè)類。
AVAsset *asset = [AVAsset assetWithURL:videoUrl]; //獲取文件
AVAssetTrack *track = [[asset tracksWithMediaType:AVMediaTypeAudio] firstObject];  //從媒體中得到聲音軌道
  • 上面獲得的track就是提取出來的視頻音軌,接下來要對(duì)音軌進(jìn)行轉(zhuǎn)化,轉(zhuǎn)化的目的是為了量化音頻的大小,方便接下來圖形的繪制。
2、音軌轉(zhuǎn)化成NSData
  • 在之前獲得到track之后,對(duì)track的數(shù)據(jù)進(jìn)行讀取,AVAssetReader可以監(jiān)聽讀取的狀態(tài),結(jié)合AVAssetReaderTrackOutput可以獲得到每一個(gè)CMSampleBufferRef,最后,將每一個(gè)CMSampleBufferRef轉(zhuǎn)化成NSData存儲(chǔ)起來就完成了音軌轉(zhuǎn)化為NSData的過程,越說越暈,看代碼和注釋吧。
 NSMutableData *data = [[NSMutableData alloc]init]; //用于保存音頻數(shù)據(jù)
 
 //讀取配置
    NSDictionary *dic = @{AVFormatIDKey :@(kAudioFormatLinearPCM),
                          AVLinearPCMIsBigEndianKey:@NO,    // 小端存儲(chǔ)
                          AVLinearPCMIsFloatKey:@NO,    //采樣信號(hào)是整數(shù)
                          AVLinearPCMBitDepthKey :@(16)  //采樣位數(shù)默認(rèn) 16
                          };
    
    
    NSError *error;
    AVAssetReader *reader = [[AVAssetReader alloc] initWithAsset:asset error:&error]; //創(chuàng)建讀取
    if (!reader) {
        NSLog(@"%@",[error localizedDescription]);
    }
    //讀取輸出,在相應(yīng)的軌道上輸出對(duì)應(yīng)格式的數(shù)據(jù)
    AVAssetReaderTrackOutput *output = [[AVAssetReaderTrackOutput alloc]initWithTrack:track outputSettings:dic];
    
    //賦給讀取并開啟讀取
    [reader addOutput:output];
    [reader startReading];
    
    //讀取是一個(gè)持續(xù)的過程,每次只讀取后面對(duì)應(yīng)的大小的數(shù)據(jù)
    while (reader.status == AVAssetReaderStatusReading) {
        
        CMSampleBufferRef sampleBuffer = [output copyNextSampleBuffer]; //讀取到數(shù)據(jù)
        if (sampleBuffer) {
            CMBlockBufferRef blockBUfferRef = CMSampleBufferGetDataBuffer(sampleBuffer);//取出數(shù)據(jù)
            
             //返回一個(gè)大小,size_t針對(duì)不同的平臺(tái)有不同的實(shí)現(xiàn),擴(kuò)展性更好
            size_t length = CMBlockBufferGetDataLength(blockBUfferRef);
            
            SInt16 sampleBytes[length];
            CMBlockBufferCopyDataBytes(blockBUfferRef, 0, length, sampleBytes); //將數(shù)據(jù)放入數(shù)組
            [data appendBytes:sampleBytes length:length]; //將數(shù)據(jù)附加到data中
            CMSampleBufferInvalidate(sampleBuffer);//銷毀
            CFRelease(sampleBuffer); //釋放
        }
    }
    if (reader.status == AVAssetReaderStatusCompleted) {
        // 讀取結(jié)束...
    }else{
        NSLog(@"獲取音頻數(shù)據(jù)失敗");
    }
削減音頻、獲取采樣值
  • 得到轉(zhuǎn)化后的NSData數(shù)據(jù)之后,因?yàn)楂@得的data包含成千上萬的byte,如果對(duì)data的每一個(gè)byte進(jìn)行處理,會(huì)大大影響手機(jī)的處理速度,而且沒有這個(gè)必要,因此需要對(duì)data進(jìn)行削減,以減少處理的數(shù)量,達(dá)到性能上的提升。具體的削減的方式為:將data按照一定的比例縮小成一個(gè)一個(gè)的小的data包,將每一個(gè)data包中的最大值提取出來存入到數(shù)組集合中。經(jīng)過這樣的處理,數(shù)組中存放的就是成倍削減后的data了。看代碼:
//縮減音頻 (size為將要繪制波紋的view的尺寸,不需要請(qǐng)忽略)
- (NSArray *)cutAudioData:(CGSize)size {
    NSMutableArray *filteredSamplesMA = [[NSMutableArray alloc]init];
    NSData *data = [self getRecorderDataFromURL:self.url];
    NSUInteger sampleCount = data.length / sizeof(SInt16);//計(jì)算所有數(shù)據(jù)個(gè)數(shù)
    NSUInteger binSize = sampleCount / (size.width * 0.1); //將數(shù)據(jù)分割為一個(gè)個(gè)小包
    
    SInt16 *bytes = (SInt16 *)self.audioData.bytes; //總的數(shù)據(jù)個(gè)數(shù)
    SInt16 maxSample = 0; //sint16兩個(gè)字節(jié)的空間
    //以binSize為一個(gè)樣本。每個(gè)樣本中取一個(gè)最大數(shù)。也就是在固定范圍取一個(gè)最大的數(shù)據(jù)保存,達(dá)到縮減目的
    for (NSUInteger i= 0; i < sampleCount; i += binSize) {
        //在sampleCount(所有數(shù)據(jù))個(gè)數(shù)據(jù)中抽樣,抽樣方法為在binSize個(gè)數(shù)據(jù)為一個(gè)樣本,在樣本中選取一個(gè)數(shù)據(jù)
        SInt16 sampleBin[binSize];
        for (NSUInteger j = 0; j < binSize; j++) {//先將每次抽樣樣本的binSize個(gè)數(shù)據(jù)遍歷出來
            
            sampleBin[j] = CFSwapInt16LittleToHost(bytes[i + j]);
            
        }
        //選取樣本數(shù)據(jù)中最大的一個(gè)數(shù)據(jù)
        SInt16 value = [self maxValueInArray:sampleBin ofSize:binSize];
        //保存數(shù)據(jù)
        [filteredSamplesMA addObject:@(value)];
        //將所有數(shù)據(jù)中的最大數(shù)據(jù)保存,作為一個(gè)參考。可以根據(jù)情況對(duì)所有數(shù)據(jù)進(jìn)行“縮放”
        if (value > maxSample) {
            maxSample = value;
        }
    }
    //計(jì)算比例因子
    CGFloat scaleFactor = (size.height * 0.5)/maxSample;
    //對(duì)所有數(shù)據(jù)進(jìn)行“縮放”
    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;
}
繪制圖形
  • 上面的代碼將按比例削減后的音頻的最大值存入到了數(shù)組集合中,下面將根據(jù)這個(gè)數(shù)組進(jìn)行相關(guān)的繪制。數(shù)組的數(shù)量表示豎條形波紋的數(shù)量,數(shù)組的元素的大小代表?xiàng)l紋的高度大小。但因?yàn)橛袀€(gè)別元素會(huì)出現(xiàn)過大或過小的問題會(huì)對(duì)繪制的結(jié)果產(chǎn)生辣眼睛的影響,這里對(duì)元素進(jìn)行了一次簡(jiǎn)單的處理,就是取得數(shù)組元素的平均值,超出或不足平均值的元素按照特定的比例進(jìn)行縮放再與平均值做加或減運(yùn)算得到要繪制在view上的高度。看代碼:
- (void)setupWithRect:(CGRect)rect {
    
    self.itemArray = [NSMutableArray new];
    
    NSArray *filerSamples = [self cutAudioData:self.bounds.size];//得到繪制數(shù)據(jù)
    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];
    
    // 計(jì)算音軌數(shù)組的平均值
    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++){
        
        // 計(jì)算每組數(shù)據(jù)與平均值的差值
        int Xi = [self.filerSamples[i] intValue];
        CGFloat scale = (Xi - avg)/avg;     // 繪制線條的縮放比例
        
        int baseH = 0;      // 長(zhǎng)度基數(shù),   線條長(zhǎng)度范圍: 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];
    }
}
  • 此時(shí),self.itemArray中存放的就是需要繪制在view上的線條,下面只需要遍歷這些線條,并一一繪制在view上即可。看代碼:
- (void)updateItemsWithRect:(CGRect)rect
{
    UIGraphicsBeginImageContext(self.frame.size);
    
    CGFloat x = rect.size.width*0.8/(self.filerSamples.count);  // x:表示兩個(gè)線條的間隔
    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();
}

至此,便結(jié)束了全部的提取音軌繪制豎條紋波形的代碼。如有疑問,請(qǐng)聯(lián)系:cpf9401@163.com

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容