抖音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中细小的一部分，但是在技术层面上来看也是需要一级一级去用代码实现的。感兴趣的话可以持续关注，后期会按时更新。
声明：本文由作者原创，转载请注明作者及原文链接。
