Tag: Shazam
Shazam实时歌词功能的幕后花絮
作为重新设计的一部分，我有机会研究了一些非常令人兴奋且在技术上具有挑战性的部分，包括新版本的实时歌词同步功能，或者我们喜欢称其为“同步歌词”的方式。 你们中的某些人可能已经使用Shazam很久了，他们知道此功能不是新功能，我们确实在一段时间前就在应用程序中使用了此功能。 这就是我们交付给用户的魔力的全部。 不久之后，我们将其重新带回去，并使其变得更好。 在这篇博客中，我将分享一些有关开发过程的见解以及我们已经做出的一些决定。 设计！ 设计！ 设计！ 当我们在应用程序中构建新功能时，我们的设计师始终会提供他们如何想象其工作原理的原型。 我们确实关心细节，因此确保每个细节正确都是很重要的。 归根结底，这会让我们的设计师感到满意，但更重要的是，我们的用户也会感到满意。 在歌词同步的情况下，原型是开发过程的基本要素。 在下面，您可以看到我所学习和复制的那本书。 这部影片上发生的事情很少值得注意。 在突出显示的线和未聚焦的线之间有动画，以及实际的运动。 为简化起见，我将其称为白色文本行 ， 突出显示的行 。 这条线将失去重点 之后的路线将成为重点。 现在，将它们分解为关键动画： 在行改变的任何给定时刻，突出显示的行的alpha值从1.0更改为0.0 。 （1个动画）。 高亮显示的行必须在屏幕上完全相同的位置居中。 列表滚动一行（1个动画）。 在滚动过程中，即将成为焦点的线（意味着它必须从列表中淡出）将alpha值从1.0更改为0.0 ，而旧的突出显示的线则出现在逆动画的顶部（淡入到清单）。 想象一下，就像您在突出显示的行周围有一个安全区域一样，在列表滚动期间，您必须淡出刚击到安全区域底部的行，然后淡出将保留在顶部的行。 请参见下图，其中红色是突出显示的线条（2个动画）周围的安全区域。 在动画方面，并不复杂。 总共4个动画，它们全部更改一些alpha值。 容易吧？ 除了动画之外，使设计更加复杂的是突出显示的行始终是静态的，而其余的行（称为歌词列表）仅是移动的，至少这就是我们要复制的效果。 我与Android团队进行了一些内部讨论，以了解实现这种行为的方法。 在我开始实施之前，考虑了两种可能性。 同步歌词＃1 一种可能是将歌词列表视为两个单独的集合视图[1]和一个静态视图。 我喜欢将此静态视图称为焦点视图 。 在这种情况下，我们将一个集合视图视为已通过的歌词，将焦点视图视为突出显示的行，将第二个集合视图视为将要出现的歌词。 优点 焦点视图在两个集合视图之间是静态的，因此我们无需计算视图的位置并同步其后的文本。 易于在视图上设置布局约束。 缺点： 我们将歌词列表视为两个单独的集合视图，因此我们需要从底部集合视图中删除第一行，并将突出显示的行重新插入到顶部集合视图中。 在调试和编写漂亮的代码时，这可能会引起头痛。 该功能的要求之一是在屏幕上实现用户交互（稍后进行介绍）。 对于两个集合视图，这将非常困难。 我们可能需要创建第三个集合视图…pphhhh，什么令人头痛，对吗？ 此外，另一个要求是在两行文本之间插入一个广告（稍后再阅读）。 使用这种布局很难在同步过程中跳过广告。 同步歌词＃2 另一种可能性，即我们实际实现的可能性，将歌词列表视为单个集合视图，并将焦点视图置于其上方。 […]
iOS上的Shazam：UI测试+ Shazam Pro用户提示
在Shazam，我们从一开始就尝试使用UI测试。 您还记得用Javascript编写这些测试脚本吗？ 但是直到最近，我们还无法真正将其集成到我们的流程中。 在Javascript时代（严重的是，有人还记得这种技术的名字吗？），每个人都必须编写代码来消除弹出窗口，即使引入了最小的更改，即使是最直接的测试也变得无法使用。 当引入XCUITest时，它肯定会变得更好，但我们还缺少一件事-应用程序间通信和多应用程序测试。 当我们不得不将CFNotificationCenter用于这些目的时，感觉并不正确，因此我们放弃了一段时间。 但是从XCode 9开始，我们现在只需引用捆绑标识符即可在不同应用之间运行，终止和通信。 让app1 = XCUIApplication（bundleIdentifier：“ com.Shazam.app1”） app1.launchEnvironment = [“键”：“值”] app1.launch（）let app2 = XCUIApplication（bundleIdentifier：“ com.Shazam.app2”） app1.terminate（） app2.launch（） 因此，现在我们可以运行多个应用程序。 只需别忘了将所有应用程序添加到UITests目标的“目标依赖项”，XCode会自动将其安装在您的设备或模拟器上。 因此，在Shazam中，我们关心Shazaming，并使用这些简单的工具现在可以为我们的核心功能构建一些UI测试。 多年前，在一次研讨会上，我听肯特·贝克（Kent Beck）的演讲时，我记得他提到音频是编写自动化测试最困难的事情之一。 的确是正确的（我们拥有用于测试内部音频工具的更复杂的测试），但是使用这些新工具，我们可以创建一个简单的设置来测试我们所需要的。 我们要求PlaybackApp播放一些音频（我们使用外部URL来下载和播放音频文件）。 //启动播放应用并传递音频文件URLletplaybackApplication = XCUIApplication（bundleIdentifier：“ com.Shazam.TestPlaybackApp”）playbackApplication.launchEnvironment = [“ url”：playbackTest.urlString] playbackApplication.launch（） 现在我们启动Shazam应用程序并启动Shazaming！ //启动播放应用并传递音频文件URLlet shazam = XCUIApplication（bundleIdentifier：“ com.Shazam。***”） shazam.launch（） 让shazamButton = … shazamButton.tap（） 现在，我们等待是否显示正确的标题（实际上，我们做的有些不同，但这也可以工作）。 让artistLabel = shazam.staticTexts [“ 优素福·拉特夫（Yusef Lateef） […]
