抖音app开发时，在录制视频添加背景音乐功能实现流程

admin 管理员组

文章数量: 1086061

抖音app开发时，在录制视频添加背景音乐功能实现流程

抖音app之所以“横扫”整个短视频领域，最主要的还是占据了短视频玩法的“先机”，其中在录制视频时添加背景音乐，是很多用户都非常喜欢的步骤，但是在抖音app开发时，添加背景音乐的功能也是需要技术实现的。今天就来分享下关于这一功能的大概实现流程。
1.在录制界面点击音乐，绘制UI

添加搜索框
-(UIView *)searchBg {if (!_searchBg) {_searchBg = [[UIView alloc]initWithFrame:CGRectMake(0,64+statusbarHeight,_window_width,44)];_searchBg.backgroundColor = [UIColor whiteColor];_search = [[UISearchBar alloc]initWithFrame:CGRectMake(0,0, _window_width,44)];_search.backgroundImage = [PublicObj getImgWithColor:[UIColor whiteColor]];_search.placeholder = @"搜索歌曲名称";_search.delegate = self;UITextField *textField ;if (@available(iOS 13.0,*)) {textField = _search.searchTextField;}else {textField = [_search valueForKey:@"_searchField"];}[textField setBackgroundColor:RGB_COLOR(@"#f9fafb", 1)];
//        [textField setValue:GrayText forKeyPath:@"_placeholderLabel.textColor"];
//        [textField setValue:[UIFont systemFontOfSize:16] forKeyPath:@"_placeholderLabel.font"];UIButton *clearBtn = [textField valueForKey:@"_clearButton"];[clearBtn addTarget:self action:@selector(clickClearBtn) forControlEvents:UIControlEventTouchUpInside];textField.textColor = GrayText;textField.layer.cornerRadius = 18;textField.layer.masksToBounds = YES;[_searchBg addSubview:_search];}return _searchBg;
}

2.添加音乐分类界面

 - (MusicHeaderView *)musicClassV {if (!_musicClassV) {//5个像素空隙classHeight = _window_width/5.5+60;YBWeakSelf;_musicClassV = [[MusicHeaderView alloc]initWithFrame:CGRectMake(0, _searchBg.bottom+5, _window_width, classHeight) withBlock:^(NSString *type, NSString *title) {//停止播放音乐[weakSelf stopMusic];MusicClassVC *classVC = [[MusicClassVC alloc]init];classVC.navi_title = title;classVC.class_id = type;if ([_fromWhere isEqual:@"edit"]) {classVC.fromWhere = _fromWhere;}classVC.backEvent = ^(NSString *type, NSString *loadPath, NSString *songID) {//从音乐分类中返回事件if (weakSelf.pathEvent && [type isEqual:@"分类音乐"]) {weakSelf.pathEvent(loadPath, songID);}[weakSelf dismissViewControllerAnimated:YES completion:nil];};[weakSelf.navigationController pushViewController:classVC animated:YES];}];_musicClassV.segEvent = ^(NSString *type) {//重置部分属性[weakSelf resetAttribute];[weakSelf stopMusic];if ([type isEqual:@"热门"]) {_isColl = NO;[weakSelf pullTopTenMusic];}else{//收藏_isColl = YES;[weakSelf pullCollectMusic];}};}return _musicClassV;
}

3.添加音乐列表

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{MusicCell *cell = [MusicCell cellWithTab:tableView andIndexPath:indexPath];//10-31添加(self.curRow == (int)indexPath.row && self.isOpen) ? (cell.startRecoedBtn.hidden = NO) : (cell.startRecoedBtn.hidden = YES);cell.backgroundColor = [UIColor whiteColor];MusicModel *model = _models[indexPath.row];cell.model = model;cell.selectionStyle = UITableViewCellSelectionStyleNone;YBWeakSelf;//回调事件处理NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);NSString *docDir = [paths objectAtIndex:0];NSString *loadPath = [docDir stringByAppendingFormat:@"/*%@*%@*%@*%@.mp3",model.musicNameStr,model.singerStr,model.timeStr,model.songID];cell.recordEvent = ^(NSString *type) {//停止播放音乐[weakSelf stopMusic];//开拍之前()---开拍之后(编辑页面)if ([_fromWhere isEqual:@"edit"]) {//回调音频路径if (weakSelf.pathEvent) {weakSelf.pathEvent(loadPath, model.songID);}[weakSelf dismissViewControllerAnimated:YES completion:nil];}else{TCVideoRecordViewController *videoRecord = [TCVideoRecordViewController new];videoRecord.musicPath = loadPath;videoRecord.musicID = model.songID;videoRecord.haveBGM = YES;UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:videoRecord];nav.navigationBarHidden = YES;nav.modalPresentationStyle = 0;[self presentViewController:nav animated:YES completion:nil];}};__weak MusicCell *weakCell = cell;cell.rsEvent = ^(NSString *rs, NSString *erro) {if ([rs isEqual:@"sucess"]) {[weakSelf stopMusic];[weakSelf playMusic:loadPath currentCell:weakCell currentIndex:indexPath];}else{[MBProgressHUD showPop:erro];}[[JCHATAlertViewWait ins] hidenAll];};cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[PublicObj getImgWithColor:SelCell_Col]];return cell;
}

4.点击列表音乐时，下载并播放音乐试听

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{[self.tableView deselectRowAtIndexPath:indexPath animated:YES];MusicCell *cell = (MusicCell *)[tableView cellForRowAtIndexPath:indexPath];MusicModel *model = _models[indexPath.row];if (self.curRow == (int)indexPath.row) {self.curRow = -99999;self.isOpen = NO;[self stopMusic];[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];return;}else{self.isOpen = YES;}NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);NSString *docDir = [paths objectAtIndex:0];NSString *loadPath = [docDir stringByAppendingFormat:@"/*%@*%@*%@*%@.mp3",model.musicNameStr,model.singerStr,model.timeStr,model.songID];NSFileManager *manager = [NSFileManager defaultManager];if ([manager fileExistsAtPath:loadPath]) {//已下载[self playMusic:loadPath currentCell:cell currentIndex:indexPath];}else{[[JCHATAlertViewWait ins] showInView];//下载歌曲[cell musicDownLoad];}//处理显示、隐藏开拍按钮if (self.curRow == (int)indexPath.row) {return;}MusicCell *lastCell = (MusicCell *)[tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:self.curRow inSection:0]];[lastCell.StateBtn setImage:[UIImage imageNamed:@"music_play"] forState:0];self.isOpen = YES;self.curRow = (int)indexPath.row;/** 刷新tableView，系统默认会有一个自带的动画 */[tableView beginUpdates];//10-31添加lastCell.startRecoedBtn.hidden = YES;cell.startRecoedBtn.hidden = NO;//(self.curRow == (int)indexPath.row && self.isOpen) ? (cell.startRecoedBtn.hidden = NO) : (cell.startRecoedBtn.hidden = YES);[tableView endUpdates];}

5.确认使用音乐后，下一步编辑音乐时传相应路径

  TCVideoEditViewController *vc = [[TCVideoEditViewController alloc] init];vc.isAlbum = isAlbum;[vc setVideoPath:recordResult.videoPath];vc.musicPath = _musicPath;vc.musicID = _musicID;vc.haveBGM = _haveBGM;vc.isTakeSame = _isTakeSame;vc.recordType = _recordType;[self.navigationController pushViewController:vc animated:YES];[self releaseEditor];

以上就是在抖音app开发时，录制视频添加背景音乐功能的大概实现流程，虽然只是整个app中细小的一部分，但是在技术层面上来看也是需要一级一级去用代码实现的。感兴趣的话可以持续关注，后期会按时更新。
声明：本文由作者原创，转载请注明作者及原文链接。

本文标签： 抖音app开发时，在录制视频添加背景音乐功能实现流程