CODEWITHSUNDEEP
iosiphonesignal-processingwaveformwave
Vishal Khatri
Vishal Khatri

Reputation: 952

Generating waveform from any music file ios

I'm looking for how to draw the sound waves according to music.

I want waves like this image

enter image description here

here is some discussion about displaying Waves from music

  1. WaveForm on IOS
  2. rendering a waveform on an iphone
  3. audio waveform visualisation with iPhone

Github Example Links

But not getting any idea about this type of wavefrom, is this possible to draw waves like this image?

Upvotes: 25

Views: 26287

Answers (3)

Learner
Learner

Reputation: 711

A little bit refactoring from the above answers


import AVFoundation
import CoreGraphics
import Foundation
import UIKit

class WaveGenerator {
    private func readBuffer(_ audioUrl: URL) -> UnsafeBufferPointer<Float> {
        let file = try! AVAudioFile(forReading: audioUrl)

        let audioFormat = file.processingFormat
        let audioFrameCount = UInt32(file.length)
        guard let buffer = AVAudioPCMBuffer(pcmFormat: audioFormat, frameCapacity: audioFrameCount)
        else { return UnsafeBufferPointer<Float>(_empty: ()) }
        do {
            try file.read(into: buffer)
        } catch {
            print(error)
        }

//        let floatArray = Array(UnsafeBufferPointer(start: buffer.floatChannelData![0], count: Int(buffer.frameLength)))
        let floatArray = UnsafeBufferPointer(start: buffer.floatChannelData![0], count: Int(buffer.frameLength))

        return floatArray
    }

    private func generateWaveImage(
        _ samples: UnsafeBufferPointer<Float>,
        _ imageSize: CGSize,
        _ strokeColor: UIColor,
        _ backgroundColor: UIColor
    ) -> UIImage? {
        let drawingRect = CGRect(origin: .zero, size: imageSize)

        UIGraphicsBeginImageContextWithOptions(imageSize, false, 0)

        let middleY = imageSize.height / 2

        guard let context: CGContext = UIGraphicsGetCurrentContext() else { return nil }

        context.setFillColor(backgroundColor.cgColor)
        context.setAlpha(1.0)
        context.fill(drawingRect)
        context.setLineWidth(0.25)

        let max: CGFloat = CGFloat(samples.max() ?? 0)
        let heightNormalizationFactor = imageSize.height / max / 2
        let widthNormalizationFactor = imageSize.width / CGFloat(samples.count)
        for index in 0 ..< samples.count {
            let pixel = CGFloat(samples[index]) * heightNormalizationFactor

            let x = CGFloat(index) * widthNormalizationFactor

            context.move(to: CGPoint(x: x, y: middleY - pixel))
            context.addLine(to: CGPoint(x: x, y: middleY + pixel))

            context.setStrokeColor(strokeColor.cgColor)
            context.strokePath()
        }
        guard let soundWaveImage = UIGraphicsGetImageFromCurrentImageContext() else { return nil }

        UIGraphicsEndImageContext()
        return soundWaveImage
    }

    func generateWaveImage(from audioUrl: URL, in imageSize: CGSize) -> UIImage? {
        let samples = readBuffer(audioUrl)
        let img = generateWaveImage(samples, imageSize, UIColor.blue, UIColor.white)
        return img
    }
}

Usage

let url = Bundle.main.url(forResource: "TEST1.mp3", withExtension: "")!
let img = waveGenerator.generateWaveImage(from: url, in: CGSize(width: 600, height: 200))

Upvotes: 3

Tendulkar
Tendulkar

Reputation: 5540

I, too have been trying sincerely for the last three months but I didn't find a solution. For the time being I used static images based on the type of song (static data songs). I added the images to a UIScrollView and changed the contentOffset based on the current position of the audio.

Upvotes: 3

JConway
JConway

Reputation: 569

Disclaimer: A lot of this has been discovered through trial and error, I may have some serious false assumptions in play here:

You would need to use the AudioUnits framework. When initialising the playback you can create an AURenderCallbackStruct. You can specify in this struct a playback callback function which provides you with a few arguments which will contain the information you need.

the callback function will have a signature like this:

static OSStatus recordingCallback (void *inRefCon,
                                   AudioUnitRenderActionFlags *ioActionFlags,
                                   const AudioTimeStamp *inTimeStamp,
                                   UInt32 inBusNumber,
                                   UInt32 inNumberFrames,
                                   AudioBufferList *ioData)

In here there is an array of audio data which can be used for getting amplitude of the audio buffer for each frequency bin, or for calculating the DB value of the frequency bin.

I don't know what that graph is showing, but it looks to me like a smoothed display of the amplitudes of each of the sample bins.

Audio Units are not simple, but its worth playing with for a while until you get a grip.

Here is a skeleton of my callback function so you have more of a grasp as to what I mean:

EDIT: removed dead link, I've lost this code sorry

Upvotes: 4

Related Questions