# Building the new SoundCloud iOS application -- Part II: Waveform rendering

DevFeed: [Building the new SoundCloud iOS application -- Part II: Waveform rendering](<https://devfeed.tech/articles/building-the-new-soundcloud-ios-application-part-ii-waveform-rendering-2068.md>)

Original publisher: [Read original article](<https://developers.soundcloud.com/blog//ios-waveform-rendering>)

Published: 2014-09-15T00:00:00Z

Content type: article

Language: en

Sources: [SoundCloud Backstage Blog](<https://devfeed.tech/sources/soundcloud-backstage-blog.md>)

Topics: [iOS](<https://devfeed.tech/topics/ios.md>), [App](<https://devfeed.tech/topics/app.md>), [cpu](<https://devfeed.tech/topics/cpu.md>), [GPU](<https://devfeed.tech/topics/gpu.md>), [iphone](<https://devfeed.tech/topics/iphone.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [app](<https://devfeed.tech/tags/app.md>), [building](<https://devfeed.tech/tags/building.md>), [cpu](<https://devfeed.tech/tags/cpu.md>), [design](<https://devfeed.tech/tags/design.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [ios](<https://devfeed.tech/tags/ios.md>), [iphone](<https://devfeed.tech/tags/iphone.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [simulator](<https://devfeed.tech/tags/simulator.md>), [testing](<https://devfeed.tech/tags/testing.md>)

## AI overview

This article explains how SoundCloud improved interactive waveform rendering in its iOS app. The initial CoreGraphics implementation redrew waveform samples frequently, causing frame-rate drops and high CPU usage on an iPhone 4. Rendering the waveform once as an alpha mask, applying gradient layers, and replacing timer callbacks with system animations increased performance to 60 FPS and substantially reduced CPU usage, although system animation introduced fractional-pixel visual glitches.

## Source excerpt

When we rebuilt our iOS app, the player was the core focus. The interactive waveform was at the center of the design. It was important both...