创建Waves可视化歌曲Swift

时间:2019-08-26 06:56:57

标签: ios swift user-interface beatsmusic soundwaves

这是我要尝试的操作:

Screen Shot

屏幕截图来自6s iPhone。

Screen Shot

我一直在AVAudioPlayer中工作,我想绘制一个看起来像第一个屏幕截图的波形。我正在使用FDWAVEFORMVIEW Github吊舱绘制波浪。但是我很困惑如何画同样的波浪。

代码:

 @IBOutlet weak var soundWaveView: FDWaveformView!

  func createSoundWave() {
    soundWaveView.delegate = self
    soundWaveView.alpha = 0.0
    soundWaveView.audioURL = mainTrackURL
    soundWaveView.zoomSamples = 0 ..< soundWaveView.totalSamples / 3
    soundWaveView.doesAllowScrubbing = true
    soundWaveView.doesAllowStretch = true
    soundWaveView.doesAllowScroll = true
    soundWaveView.wavesColor = .lightGray
    soundWaveView.progressColor = UIColor.init(red: 46/255, green: 188/255, blue: 191/255, alpha: 1.0)
}

func waveformViewWillRender(_ waveformView: FDWaveformView) {
    startRendering = Date()
}

func waveformViewDidRender(_ waveformView: FDWaveformView) {
    endRendering = Date()
    NSLog("FDWaveformView rendering done, took %0.3f seconds", endRendering.timeIntervalSince(startRendering))
    profileResult.append(String(format: " render %0.3f ", endRendering.timeIntervalSince(startRendering)))
    UIView.animate(withDuration: 0.25, animations: {() -> Void in
        waveformView.alpha = 1.0
    })
}  

func waveformViewWillLoad(_ waveformView: FDWaveformView) {
    startLoading = Date()
}

func waveformViewDidLoad(_ waveformView: FDWaveformView) {
    endLoading = Date()
    NSLog("FDWaveformView loading done, took %0.3f seconds", endLoading.timeIntervalSince(startLoading))
    profileResult.append(String(format: " load %0.3f ", endLoading.timeIntervalSince(startLoading)))
}

问题:如何显示与原始图像相同的波形(第一个屏幕截图)?

有人可以向我解释如何绘制相同的波形,我试图绘制这些波形,但没有结果。

任何帮助将不胜感激。

谢谢。

1 个答案:

答案 0 :(得分:7)

嗯,波形图...从外观上看,您可能需要对此进行分叉并进行更改,因为@Configuration @EnableWebSecurity public class WebSecurityConfig extends WebSecurityConfigurerAdapter { //(....) @Override protected void configure(HttpSecurity http) throws Exception { http .csrf() .disable() .authorizeRequests() .antMatchers("/*.css","/*.js","/*.jsp").permitAll() .antMatchers("/app/**").permitAll() .antMatchers("/login").permitAll() .anyRequest().authenticated() .and() .formLogin() .loginPage("/login") .loginProcessingUrl("/j_spring_security_check") .defaultSuccessUrl("/", true) .failureUrl("/login?error=true") .usernameParameter("username") .passwordParameter("password") .permitAll() .and() .logout() .logoutUrl("/logout") .logoutSuccessUrl("/login") .deleteCookies("JSESSIONID") .clearAuthentication(true) .invalidateHttpSession(true) .and() .exceptionHandling() .accessDeniedPage("/view/error/forbidden.jsp") .and() .httpBasic() .authenticationEntryPoint(new AuthenticationEntryPoint(){ //<< implementing this interface @Override public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException, ServletException { //>>> response.addHeader("WWW-Authenticate", "Basic realm=\"" + realmName + "\""); <<< (((REMOVED))) response.sendError(HttpStatus.UNAUTHORIZED.value(), HttpStatus.UNAUTHORIZED.getReasonPhrase()); } }); } //(....) } 不支持此样式。

看起来 就像您可以在FDWaveformRenderOperation中修改plotWaveformGraph方法来实现这一点。当前,它对缓冲区中的每个样本进行迭代,但是如果保持不变,则您维护的FDWaveformRenderOperation每第n个样本(“宽度”栏)加“间隔”栏就递增一次,您可以得到这种外观。显然,这是一种幼稚的方法。理想情况下,您可以将样本取平均值并用“条”表示,并绘制该值。

这不是编译代码,但应该给您一个开始的地方。

index

不起眼的插件,但是您可以在waveform drawing framework中看到我的操作方法。这通常是概念上的证明,并且未经优化。 :)