iOS图文生成视频:将LRC歌词与图片合成视频

概述

本文介绍如何在iOS平台上实现将LRC格式歌词与背景图片合成为视频的功能。最终生成的视频长度将与歌词的时长相匹配,歌词会根据时间轴在视频中动态显示。

技术原理

实现这一功能主要依赖以下iOS框架:

  • AVFoundation:用于视频合成和导出
  • Core Animation:用于创建文字动画
  • Core Graphics:用于图像处理

整体流程如下:

  1. 解析LRC歌词文件,提取时间轴和歌词内容
  2. 创建视频合成会话
  3. 添加背景图片作为视频轨道
  4. 根据歌词时间轴创建文字动画
  5. 将文字动画添加为视频叠加层
  6. 导出最终视频

一.LRC歌词格式解析

LRC是一种常见的歌词文件格式,其基本结构如下:

[ti:美人鱼]
[00:00.000] 作词 : 赵美舒 (Jamei Suger)
[00:00.505] 作曲 : 赵美舒 (Jamei Suger)
[00:01.10]《美人鱼》
[00:08.23]《mermaid》
[00:08.84]作词:赵美舒JameiSuger

https://github.com/Alienchang/lrcImageVideo/blob/main/TestLRCProject/1234.lrc

二.歌词解析

歌词解析的目的是将LRC文件中的时间轴和歌词内容提取出来,以数组方式存储:

let lrcArray = [
    ["time": "00:00.000", "content": "作词 : 赵美舒 (Jamei Suger)"],
    ["time": "00:00.505", "content": "作曲 : 赵美舒 (Jamei Suger)"],
    ["time": "00:01.10", "content": "《美人鱼》"],
    ["time": "00:08.23", "content": "《mermaid》"],
    ["time": "00:08.84", "content": "作词:赵美舒JameiSuger"]
]

三.根据歌词时长生成图片视频

根据歌词时长生成图片视频的目的是根据歌词的时长生成对应的图片视频。

输入图片和时长(时长为歌词的时长),生成视频,并返回视频URL:
func generateVideo(from image: UIImage, duration: TimeInterval, completion: @escaping (URL?) -> Void)

四.将歌词内容与步骤三生成的视频合成

将歌词内容与步骤三生成的视频合成的目的是将歌词内容与步骤三生成的视频合成,并返回合成后的视频URL。

输入歌词数组和视频URL,合成视频,并返回合成后的视频URL:
private func addLRC(to videoURL: URL, lrcLines: [String], duration: TimeInterval, completion: @escaping (URL?) -> Void) 

实现原理是创建一个layer,然后将文字根据时间给予不同的坐标绘制到layer上,然后再将layer添加滚动动画。iOS原生的AVMutableVideoComposition支持将iOS的layer添加到视频中,并添加动画。最终由AVAssetExportSession导出视频。 其内部原理也是获取每一帧的图片,然后根据歌词时间轴创建文字动画,再将文字动画添加到图片上,最后导出视频。

五.Demo 地址:

https://github.com/Alienchang/lrcImageVideo