在70年代中期,雅达利Atari的首页音乐播放器,一台电视机连接到立体声,从而产生了抽象的图像与音乐同步发布。消费者可以处理图像,,扭动旋钮和推设备上的按钮。
该设备是一个市场失灵,但它是世界第一次被曝光音乐可视化。现在,音乐可视化是一种常见的技术,可以发现几乎在每一个数字媒体播放器,如iTunes或Windows Media Player。
音乐可视化在行动中看到一个例子,只需启动iTunes,开始调好,然后选择“ 查看/显示展台,允许致幻释放你的心灵!:]
在本教程中,您将创建你自己的音乐可视化。您将学习如何配置项目来播放音乐以及支持背景音乐,并创建使用UIKit中的粒子系统的粒子效果。您还将学习如何使这些粒子一首歌曲的节拍跳舞。
因此,提示了音乐和打出来的迪斯科球,事情是视觉!
注意:您可以尝试本教程使用iPhone模拟器,但你需要的设备上运行该项目,以选择不同的歌曲,并在后台播放音乐。
启动项目
要开始做事了,下载这个启动项目。启动项目具有以下功能:
- 它提供了一个简单的用户界面的应用程序。
- 支持的接口方向设置为横向。
- 的MediaPlayer.framework已被添加到项目中。
- 它包含了一个方法,它允许你从你的iPod库中挑选歌曲。
- 名为particleTexture.png图像添加到项目中使用粒子系统。
- MeterTable.h MeterTable.cpp C + +文件也添加到项目中。这些取自苹果样品项目avTouch的,在本教程将在稍后解释。
首先,解压下载的项目,在Xcode中打开它,并建立和运行。您应该看到以下内容:
您还可以点击“播放”按钮播放和暂停模式之间进行切换,但你不会听到任何音乐,直到你添加了一些代码后。点击中间隐藏/显示导航栏和工具栏上的黑色区域。
如果你在iPhone模拟器运行并点击左下角的放大镜图标上,你会看到下面的警告:
这是因为在iPhone模拟器不支持访问音乐库。但是,如果你的设备上运行,自来水,图标将显示媒体选择器,让你可以选择一首歌曲。
一旦你熟悉的用户界面,让我们开始吧。
让音乐播放
AVAudioPlayer
是一个简单的方法在iOS设备上播放音乐。AVAudioPlayer
可以在AVFoundation.framework
发现,所以你需要添加到您的项目这个框架。
注意:如果你有兴趣学习更多关于AVAudioPlayer
类,它能做什么,来看看我们为iPhone开发的音频101:播放音频通过编程教程。
在Project Navigator中选择iPodVisualizer然后根据目标选择iPodVisualizer。选择构建阶段标签,展开“ 链接二进制与图书馆部分,然后单击“ +“ (加号)按钮。
搜索AVFoundation.framework
在弹出的列表中,选中它,然后单击“ 添加“。该框架现在应该会出现在您的项目中。
它的时间来写一些代码。打开ViewController.m并进行以下更改:
|
这进口AVFoundation.h的
头文件,所以你可以访问AVAudioPlayer
,然后添加一个属性,将举行AVAudioPlayer
实例将使用你的应用程序来播放音频。
而现在,它的时间播放音乐文件。
启动项目包括音乐文件名 为DemoSong.m4a在资源文件夹,您可以使用。随意,如果你想使用不同的音频文件。只要记住,只有以下的音频编解码器支持iOS设备上进行播放:
- AAC(高级音频编码的MPEG-4)
- ALAC(苹果无损)
- HE-AAC(MPEG-4高效率AAC)
- iLBC的(互联网低比特率编解码器,另一种格式的语音)
- IMA4(IMA / ADPCM)
- 线性PCM(未压缩的,线性脉冲编码调制)
- MP3(MPEG-1音频层3)
- μ律和法律
仍然在ViewController.m中,添加下面的方法:
|
此方法创建一个音乐文件,并它作为存储audioFileURL
。,然后创建一个新的AVAudioPlayer
实例初始化与audioFileURL
和设置其numberOfLoops
属性为-1永远使音频循环。
注意:如果你决定使用提供了一个比其他音乐文件,千万记得要添加新的文件到Xcode项目和改变音乐文件名 (可能延长)在上述方法中。
年底viewDidLoad中
添加下面一行:
|
viewDidLoad中:
configureAudioPlayer:
通过调用,设置了尽快视图负载的音频播放器等可以按下播放按钮,应用程序启动和应用程序发挥你的歌声。
现在添加下面一行里面是playpause
,只是读取/ /暂停音频
后评论:
|
接下来,添加下面一行同样的方法后,只需读取/ /这里播放音频
的注释:
|
攻丝播放/暂停按钮调用的是playpause
。你刚才添加的代码讲述的AudioPlayer
来播放或暂停其当前状态所定义的_isPlaying
。正如其名称所示,这个属性标识的音频播放器是否是当前播放的音频或没有。
现在构建和运行。如果你做的一切都是正确的应用程序看起来一模一样。但现在你可以播放/暂停音乐。
这短暂的瞬间,让您的芬克!:]
选择乐曲
只是播放一首歌曲的音乐播放器,不管这首歌可能是如何的酷,是不是非常有用。因此,您将添加能够播放的音频设备的音乐库。
如果你不打算在设备上运行,或者知道如何设置起来了,你可以跳到下一章节。
您下载的启动项目设置,以便当用户选择通过所选的歌曲是一首歌曲从媒体选择器,网址playURL:
内幕ViewController.m的
。目前,playURL:
只是切换播放/暂停按钮上的图标。
内部ViewController.m,添加下面的代码到playURL:
刚过评论读取/ /添加的AudioPlayer配置在这里
:
|
上面的代码是多少你中写道configureAudioPlayer的
什么一样。然而,而不是硬编码的文件名 ,创建一个新的AVAudioPlayer
实例传递到方法中的URL。
建立,并在设备上运行,你就可以选择和播放一首歌曲从音乐库中。
注意:如果你有iTunes的比赛,你可能会看到在媒体选择器项目实际上并没有在您的设备上。如果您选择不存储在本地的一首歌曲,应用程序驳回媒体选择器和音频无法播放的。所以,如果你想听到的(很快就会看到)的东西,一定要选择一个文件,实际上有:]
虽然在设备上运行该项目,按home键。您会发现,您的音乐暂停。这是一个音乐播放器应用程序不是一个很好的经验,如果一个音乐播放器,是你后。
你可以配置你的应用程序,以便即使当应用程序进入的背景音乐将继续发挥。请记住,这是另一种不支持的功能在iPhone模拟器,这样的设备上运行的应用程序,如果你想看看它是如何工作的。
要播放的背景音乐,你需要做两件事情:设置音频会话类别,然后宣布支持背景执行的应用程序。
首先,设置音频会话类别。
音频会话配置音频行为是您的应用程序和iOS之间的中介。配置您的音频会议,建立了基本的音频为您的应用程序的行为。您可以设置您的音频会话类别根据你的应用,你怎么想它的设备和系统进行交互。
添加以下新方法ViewController.m的:
|
在configureAudioSession
,你得到音频会话使用[AVAudioSession sharedInstance的]
类别设置AVAudioSessionCategoryPlayback
。这标识将被用于播放音频(相对于记录或处理音频),当前的音频会议。
viewDidLoad中
添加下面一行,就在调用[自我configureAudioPlayer];
|
这,调用configureAudioSession
配置音频会话。
注:要了解更多关于音频会话,阅读苹果的音频会话编程指南。还是先看看我们的背景模式在iOS教程,还涵盖了主题,虽然不是在尽可能多的细节。
现在,你必须声明你的应用程序支持后台执行。
的Info.plist打开iPodVisualizer(支持文件夹),选择最后一行,单击加号按钮,添加一个新的项目。重点从下拉列表中,选择所需的背景模式的项目类型将自动更改阵列。(如果它不自动成为阵
,仔细检查的关键。)
展开的项目,设定值Item0 APP播放音频。(如果你有一个广泛的Xcode窗口,你可能没有注意到,该值是一个下拉列表,但你可以访问列表中,只需点击下拉图标年底领域。)
当你完成后,建立并在设备上运行,挑选一首歌曲并播放,按home键,这时候你要继续发挥音乐无间断,即使你的应用程序是在后台。
音乐可视化
将根据你的音乐可视化上在UIKit的
粒子系统。如果你不知道很多关于粒子系统,你可能想读的UIKit粒子系统在iOS 5或如何使一个字母/文字游戏的UIKit类:3/3部分,以熟悉必要的背景信息;这个教程进入详细解释粒子系统的基础知识。
首先,添加QuartzCore.framework
到您的项目(以同样的方式您添加AVFoundation.framework
)。
现在,选择“ 文件/新建/文件...,然后选择iOS /可可的触摸/ Objective-C类模板。命名类VisualizerView,使一个UIView的子类,单击“ 下一步“,然后单击“ 创建。
在Xcode项目导航选择“ VisualizerView.m“,并更改其扩展。M 毫米。(您可以通过点击文件两次缓慢在Project Navigator 命名。也就是说,不要不按一下它的速度不够快被认为通过双击。) 。毫米扩展告诉Xcode中,这个文件需要被编 译为Ç+ +,这是必要的,因为稍后将访问C + +类MeterTable
。
打开VisualizerView.mm以下替换其内容:
|
上面的代码主要配置的UIKit粒子的系统中,如下所示:
- 覆写
layerClass的
返回CAEmitterLayer
,它允许此视图可作为粒子发射器。 - 作为屏幕中心的大部分延伸的矩形,该矩形形状的发射极。颗粒初步建立,在此区域内。
- 创建一个呈现
CAEmitterCell
颗粒使用中的启动项目,包括particleTexture.png
。 - 设置粒子的颜色,以及与每个红色,绿色和蓝色的颜色成分可能会发生变化的范围内。
- 设置的颜色分量的速度改变粒子的寿命。
- 设置的规模和规模会有所不同,所生成的颗粒的量。
- 设置每个粒子存在0.75和1.25秒之间的时间量,并且将其设置为每秒80颗粒。
- 配置的发射极,以创建具有可变速度的颗粒,他们在任何方向发射。
- 将发射极电池的发射极层。
同样,读前面提到的教程,如果你想知道更多有趣的事情,你可以做UIKit的粒子系统和上面的配置值是如何影响生成的颗粒。
下一页的开放ViewController.m并进行以下更改:
|
现在添加下面viewDidLoad中
,,之前只是读取的行[自我configureAudioPlayer];
|
这将创建一个VisualizerView
实例,将填补其父视图和添加到_backgroundView
。(_backgroundView
定义启动项目的一部分,并且仅仅是后面的音乐控制分层图。)
建立和运行,你会看到立即行动中的粒子系统:
虽然这看起来非常的酷,你的确希望粒子“拍”你的音乐同步。这是通过改变颗粒的大小时的分贝级别的音乐的变化。
首先,打开VisualizerView.h的,并进行以下更改:
|
新的属性会给您的可视化访问到应用程序的音频播放器,并因此音频电平,但之前,你可以使用这些信息,你需要设置一件事。
切换到ViewController.m搜索setNumberOfLoops
。如果你跳过了部分设备上运行的,它会出现一次(configureAudioPlayer
),否则,它会出现两次(configureAudioPlayer
在playURL:
)。
添加下面的代码后,任何发生的行[_audioPlayer setNumberOfLoops:-1];
|
有了上面的代码,你指示AVAudioPlayer
实例,使音频级计量数据。然后,您可以通过 _audioPlayer
_visualizer
,以便它可以访问这些数据。
现在切换到VisualizerView.mm的修改如下:
|
上面的代码给出你访问一个MeterTable
实例名为meterTable的
。启动项目包括C + +的类MeterTable
,你会用它来 帮助处理音频AVAudioPlayer
水平。
这一切都谈计量是什么?它应该是容易理解的,一旦你看到下面的图片:
你最有可能看到类似的东西在前面的音响系统,弹跳跟着音乐。它只是表明你在任何给定的时间内的音频。MeterTable
的相对强度是一个辅助类,可以用来划分分贝值在范围内,用于生产像上面的图像。
您将使用MeterTable的
值转换成一个范围从0到1,你会在你的音乐可视化,使用新的值来调整大小的颗粒。
添加以下方法VisualizerView.mm:
|
上述方法每次被调用时,它更新的可视化的粒子的大小。在这里,它是如何工作的:
- 您可以设置
规模
的默认值为0.5,然后检查看是否播放_audioPlayer的
。 - 如果是玩,你叫
updateMeters
上_audioPlayer
,刷新AVAudioPlayer
基于对当前的音频数据。 - 这是肉的方法。每个音频通道(例如,立体声文件),该通道的平均功率被添加到
电源
。的平均功率的分贝值。的权力后的所有信道已被被相加,除以电源
的信道数目。这意味着电源
现在持有的平均功率,所有的音频,或分贝。 - 在这里,你通过到
meterTable
ValueAt
方法计算出的平均功耗
值。它返回一个值从0到1,你乘以5,然后设置,作为规模
。乘以5,突出音乐的效果上规模。注:为什么使用
meterTable的
转换电源
的价值?究其原因是,它简化了代码,你必须写。否则,您的代码将覆盖广泛的由averagePowerForChannel
返回值。返回值为0表示满刻度,即最大功率;,-160表示一个返回值最小功率(即接近沉默)。但信号的音频播放器,实际上可能超过满量程范围内,所以值仍然可以超越这些限制。使用meterTable
给你一个不错的值从0到1。没有什么大惊小怪的,没有弄脏。 - 最后,发射器的粒子的规模被设置为新的
刻度
值。(如果_audioPlayer
是不是在玩,这将是默认的比例为0.5;否则,这将是一些基于对当前的音频电平值。
现在您的应用程序不调用更新
,所以新的代码没有任何影响。修复,通过修改的initWithFrame:
VisualizerView.mm中加入以下几行刚过emitterLayer.emitterCells = @ [单元]
(但仍右大括号内):
|
可以在此处设置一个CADisplayLink
。à CADisplayLink的
是一个计时器,让您的应用程序来同步绘图显示器的刷新率。也就是说,它的行为就像一个的NSTimer
用1/60秒的时间间隔内,不同的是它有保证的每次设备准备重画屏幕,这通常是在以每秒60次的速率被称为。
您在上面添加创建的第一行设置为调用CADisplayLink
目标自我
更新
的一个实例。这意味着它会调用您刚才定义的更新
方法,在每个屏幕刷新。
第二行调用addToRunLoop:forMode
,开始显示链接定时器。
注:添加CADisplayLink
运行循环是一个低级别的线程相关的概念。本教程中,你只需要了解每个屏幕更新将被称为CADisplayLink
。但是,如果你想了解更多,您可以检查出的类的参考CADisplayLink或NSRunLoop,或读通过运行循环章在苹果的线程编程指南。
现在构建,运行和播放一些音乐。你会发现,粒子会改变它们的大小,但他们不“打”与音乐。这是因为我们的变化可以在不影响屏幕上已经存在的粒子。只有新的颗粒被改变。
这需要加以固定。
initWithFrame
打开VisualizerView.mm和修改如下:
|
喜欢CAEmitterLayer
,也有CAEmitterCell
一个名为emitterCells
。这意味着一个CAEmitterCell
可以包含另一个CAEmitterCell的
。这将导致在粒子发射粒子。这是正确的,伙计们,这是海龟颗粒一路下跌!:]
另请注意您孩子的一生
1/60秒。这意味着,粒子发射的childCell
将有一生的时间,这是相同的长度作为一个屏幕刷新。您设置的出生率
为60,这意味着将有60每秒发射的粒子。由于每六十分之一秒的模具,总是会有以前的粒子死亡时,创建一个粒子。你以为你的日子是短暂的:]
建立和运行,你会看到粒子系统的工作原理相同像以前那样-但它仍然不打的音乐。你可以尝试设置出生率
为30,以帮助您了解如何设置工作(只是不要忘了把它设回60)。
那么,你是怎么得到的粒子系统,打的音乐吗?
目前更新
的最后一行看起来像这样:
|
替换该行具有以下:
|
现在建立和运行,你会看到,所有的粒子击败现在你的音乐。
所以上述变化做什么?
创建和销毁颗粒以同样的速度,屏幕刷新。这意味着,每次重绘屏幕时,一组新的粒子被创建和被销毁前一组。由于总是创建新的粒子,粒子的大小计算出在那一刻的音频水平出现脉冲与音乐。
恭喜你,你刚刚作出了一个很酷的音乐可视化应用程序!
从这里去哪里?
下面是完整的示例项目中所有的代码从上面的教程
本教程给你一个基本的想法如何添加到您的应用程序的音乐可视化系统。但是,你可以把它进一步指出:
- 您可以添加更多的音乐控制,使项目一个全功能的音乐播放器。
- 您可以创建一个稍微复杂的可视化工具,修改了所有音频通道混合成一个单一的价值,而不是每个音频通道独立的粒子系统。
- 尝试创建一个不同的粒子系统(这个工具,UIEffectDesigner,可能会有所帮助)。
- 或者,也许尝试改变形状的发射极层和视图内左右移动。
当你在检查出来苹果的样品项目aurioTouch2的的。这是一个先进的音乐可视化和一个伟大的方式来学习更多的主题。
玩得开心!