抖音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开发时，在录制视频添加背景音乐功能实现流程相关推荐

短视频开发，录制视频添加背景音乐功能实现
短视频开发,会在视频录制时提供相关的背景音乐选择,看似简单的选取背景音乐,但对开发人员来说却不是那么简单,如何实现短视频开发录制视频添加背景音乐功能呢? 1.短视频开发在录制界面点击音乐,绘制UI 添 ...
在抖音APP源码中如何实现播放器的音视频同步
在抖音APP源码中音频和视频的播放是在不同线程中进行的,而且音频和视频都有自己的时间戳,所以需要同步机制保障音画同步. 抖音APP源码有多种机制可以做到音视频同步:a. 音频同步于视频.b. 视频同步 ...
一个人竟然撸了一个抖音 App
抖音短视频 App 火速爆红,没几年就成为了国民级 App.低成本的体验方式,不管是大爷大妈,还是刚会玩手机的小孩儿,都沉迷之中无法自拔. 今天推荐两个 GitHub 项目,都是移动端开发者开发的复制 ...
PRD：抖音APP产品需求文档
人人都是产品经理编辑导语:随着移动互联网的飞速发展,许多新兴行业异军突起,如今短视频行业发迅速,一时崛起不少短视频平台,其中抖音APP是现在很多人选择的平台,抖音拥有强大算法也是它不容小觑的能力:本 ...
android sdk build-tools_从零开始仿写一个抖音App——视频编辑SDK开发(一)
本文首发于微信公众号--世界上有意思的事,搬运转载请注明出处,否则将追究版权责任.交流qq群:859640274. 大家好久不见,又有一个多月没有发文章了.不知道还有哪些读者记得我的从零开始仿写抖音 ...
仿抖音APP短视频源码PHP安卓IOS
随着短视频市场的不断发展,越来越多的人开始关注短视频APP的开发和推广. 仿抖音APP短视频源码主要介绍: 系统语言:APP是原生安卓和IOS, 后端和接口是PHP(tp框架).数据库mysql+re ...
“抖音”式的酷炫短视频开发进阶
"抖音"式的酷炫短视频开发进阶原创 2018-01-19 展晓凯 LiveVideoStack 2017年短视频应用的爆发,再次改变了人们,尤其是年轻人的生活习惯,快手.抖音等应 ...
抖音App已正式更名，短视频在名称中消失
原创陈桥辉 Tech星球全面出击的抖音. Tech星球(微信ID:tech618) 文 | 陈桥辉头图 | IC Photo "抖音短视频"已成为过去式,9月28日,去掉&q ...
QuestMobile：抖音快手双巨头并进短视频时长超越在线视频
短视频行业全面爆发一年后,如今到了阶段性观察竞争格局与成果的时刻. 1月22日,第三方数据机构QusestMobile发布了中国移动互联网2018年度大报告,总结了移动互联网2018八大关键词.201 ...

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

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

最新文章

热门文章