実装したくなる音声編集

85caff7f89434c74e9c6b4287d3c8e05?s=47 Yosei
September 21, 2020

 実装したくなる音声編集

音声編集をUIを含めて解説しています。
実装の流れは、音声を収録して、その収録ファイルを編集しています。
UIの部分は波形の表示の仕方、時間表記の方法などを解説しています。

シンプルに実装するために
収録ではAVAudioRecorder、
再生ではAVAudioPlayer、
編集ではAVAssetExportSessionを用いて実装しています。

※エラー処理などは今回は省いています。

▽デモ
https://github.com/yosei-yamagishi/AudioEditor

▽アジェンダ
- 音声収録
- 音声収録UI
- 音声編集UI
- 音声編集
- まとめ

85caff7f89434c74e9c6b4287d3c8e05?s=128

Yosei

September 21, 2020
Tweet

Transcript

  1. ࣮૷ͨ͘͠ͳΔԻ੠ฤू iOS2020ɹ2020/9/21ɹΑ͏͍ͤ

  2. ࣗݾ঺հ Α͏͍ͤ @fairy_engineer Radiotalkגࣜձࣾ iOSΤϯδχΞ(4೥໨) ࡞੒ܦݧ͋ΔαʔϏε ϒϩάɺԻ੠ɺ༧໿αʔϏεͳͲ

  3. Radiotalk 1λοϓͰ؆୯ʹ͍ͭͰ΋Ͳ͜Ͱ΋ Ի੠഑৴Ͱ͖ΔΞϓϦ ※࠾༻΋ͯ͠ΔͷͰɺڵຯͷ͋Δํ ͸TwitterͷDMͰ࿈བྷ͍ͩ͘͞

  4. Radiotalk಺Ͱ࣮૷ͨ͠ Ի੠ฤूͷ؆қ൛Λղઆ͠·͢

  5. σϞ

  6. ϙΠϯτΛԡ͑͞Ε͹ ؆୯ʹͰ͖Δ

  7. ࣮૷ͨ͘͠ͳΔԻ੠ฤू • Ի੠ऩ࿥ • Ի੠ऩ࿥UI • Ի੠ฤूUI • Ի੠ฤू •

    ·ͱΊ
  8. ࣮૷ͨ͘͠ͳΔԻ੠ฤू • Ի੠ऩ࿥ɹ • Ի੠ऩ࿥UI • Ի੠ฤूUI • Ի੠ฤू •

    ·ͱΊ
  9. Ի੠ऩ࿥ Ի੠ऩ࿥͸AVAudioRecorderͰߦ͏

  10. Ի੠ऩ࿥ Ի੠ऩ࿥Ϋϥεͷશମߏ੒ ೾ܗΛऔಘ

  11. Ի੠ऩ࿥ Ի੠ऩ࿥Ϋϥεͷશମߏ੒ɹ ೾ܗΛऔಘ

  12. Ի੠ऩ࿥Ϋϥεͷશମߏ੒ RecorderManager ⌞RecorderFileHandler (ϑΝΠϧ؅ཧ) ⌞RecorderSessionHandler (AudioSessionͷ؅ཧ) ⌞RecorderHandler (AVAudioRecorderΛ؅ཧ)

  13. Ի੠ऩ࿥Ϋϥεͷશମߏ੒ RecorderManager ⌞RecorderFileHandlerɹ✅ ऩ࿥ϑΝΠϧ४උ (ϑΝΠϧ؅ཧ) ⌞RecorderSessionHandlerɹ✅ Session Activate (AudioSessionͷ؅ཧ) ⌞RecorderHandlerɹ

    (AVAudioRecorderΛ؅ཧ)
  14. AVAudioRecorderΛηοτΞοϓ

  15. AVAudioRecorderΛηοτΞοϓ

  16. AVAudioRecorderΛηοτΞοϓ

  17. Ի੠ऩ࿥Ϋϥεͷશମߏ੒ RecorderManagerɹ ⌞RecorderFileHandlerɹ✅ (ϑΝΠϧ؅ཧ) ⌞RecorderSessionHandlerɹ✅ (AudioSessionͷ؅ཧ) ⌞RecorderHandlerɹ✅ (AVAudioRecorderΛ؅ཧ)

  18. ऩ࿥ΫϥεͷηοτΞοϓ

  19. ऩ࿥ΫϥεͷηοτΞοϓ

  20. ऩ࿥ΫϥεͷηοτΞοϓ

  21. ऩ࿥ΫϥεͷηοτΞοϓ

  22. Ի੠ऩ࿥ Ի੠ऩ࿥Ϋϥεͷશମߏ੒ɹ✅ ೾ܗΛऔಘɹ

  23. ೾ܗΛऔಘ

  24. ೾ܗΛऔಘ

  25. ೾ܗΛऔಘ AVAudioRecorder͔Β σγϕϧ(Իͷେ͖͞)Λऔಘ͠ ৼ෯ʹม׵͢Δ

  26. ೾ܗΛऔಘ

  27. ೾ܗΛऔಘ

  28. ೾ܗΛऔಘ

  29. ࣮૷ͨ͘͠ͳΔԻ੠ฤू • Ի੠ऩ࿥ɹ✅ • Ի੠ऩ࿥UIɹ • Ի੠ฤूUI • Ի੠ฤू •

    ·ͱΊ
  30. Ի੠ऩ࿥UI Ի੠೾ܗ͸CollectionViewͰදࣔ͢Δ

  31. Ի੠ऩ࿥UI UIͷશମߏ଄ ೾ܗͷCollectionViewͷηοτΞοϓ ऩ࿥࣌ͷUI੍ޚ

  32. Ի੠ऩ࿥UI UIͷશମߏ଄ɹ ೾ܗͷCollectionViewͷηοτΞοϓ ऩ࿥࣌ͷUI੍ޚ

  33. UIશମߏ੒

  34. UIશମߏ੒

  35. UIશମߏ੒

  36. UIશମߏ੒

  37. UIશମߏ੒ • 0.1ඵ͝ͱʹ೾ܗΛऔಘ • ೾ܗ̍ͭ͸0.1ඵΛද͢ • ೾ܗͷԣ෯αΠζ͸2px ex) ऩ࿥࣌ؒ10ඵͷ৔߹ औಘ೾ܗ਺ɿ10ඵ

    / 0.1 = 100 ೾ܗԣ෯ɿ100ݸ * 2px = 200px
  38. Ի੠ऩ࿥UI UIͷશମߏ଄ɹ✅ ೾ܗͷCollectionViewͷηοτΞοϓɹ ऩ࿥࣌ͷUI੍ޚ

  39. ೾ܗͷCollectionViewͷηοτΞοϓ

  40. ೾ܗͷCollectionViewͷηοτΞοϓ

  41. ೾ܗͷCollectionViewͷηοτΞοϓ

  42. UICollectionViewDataSource

  43. UICollectionViewDataSource

  44. UICollectionViewCell

  45. UICollectionViewDelegateFlowLayout

  46. UICollectionViewDelegateFlowLayout

  47. UICollectionViewDelegateFlowLayout

  48. Ի੠ऩ࿥UI UIͷશମߏ଄ɹ✅ ೾ܗͷCollectionViewͷηοτΞοϓɹ✅ ऩ࿥࣌ͷUI੍ޚɹ

  49. ऩ࿥࣌ͷUI੍ޚ

  50. λΠϚʔͰUI੍ޚ

  51. λΠϚʔͰUI੍ޚ

  52. λΠϚʔͰUI੍ޚ

  53. λΠϚʔͰUI੍ޚ

  54. λΠϚʔͰUI੍ޚ

  55. λΠϚʔͰUI੍ޚ

  56. λΠϚʔͰUI੍ޚ

  57. λΠϚʔͰUI੍ޚ

  58. λΠϚʔͰUI੍ޚ

  59. λΠϚʔͰUI੍ޚ

  60. ͜͜·Ͱ࣮૷ͨ͠ऩ࿥෦෼

  61. ࣮૷ͨ͘͠ͳͬͯ ख͕͏͍ͣͯ·͢Ͷ

  62. લ൒ઓऴྃʂ ଓ͍ͯ͸ޙ൒ઓʂ

  63. ࣮૷ͨ͘͠ͳΔԻ੠ฤू • Ի੠ऩ࿥ɹ✅ • Ի੠ऩ࿥UIɹ✅ • Ի੠ฤूUIɹ • Ի੠ฤू •

    ·ͱΊ
  64. Ի੠ฤूUI

  65. Ի੠ฤूUI Ի੠ฤूUI͸4૚ͷScrollViewͰදݱ͢Δ

  66. Ի੠ฤूUI UIͷશମߏ଄ ̐૚ͷScrollViewͷUI ̐૚ͷScrollViewͷ࿈݁ ฤूΤϦΞUI Ի੠࠶ੜUI

  67. Ի੠ฤूUI UIͷશମߏ଄ɹ ̐૚ͷScrollViewͷUI ̐૚ͷScrollViewͷ࿈݁ ฤूΤϦΞUI Ի੠࠶ੜUI

  68. UIશମߏ੒

  69. UIશମߏ੒ ฤूόʔScrollView ೾ܗCollectionView ࣌ؒCollectionView ฤूΤϦΞScrollView ࠷എ໘ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ࠷લ໘

  70. ̐૚ͷScrollViewͷUI [࠷લ໘] ฤूόʔScrollView ೾ܗCollectionView ࣌ؒCollectionView ฤूΤϦΞScrollView [࠷എ໘]

  71. Ի੠ฤूUI UIͷશମߏ଄ ̐૚ͷScrollViewͷUIɹ ̐૚ͷScrollViewͷ࿈݁ ฤूΤϦΞUI Ի੠࠶ੜUI

  72. ̐૚ͷScrollViewͷUI [࠷લ໘] ฤूόʔScrollViewɹ ೾ܗCollectionView ࣌ؒCollectionView ฤूΤϦΞScrollViewɹ [࠷എ໘]

  73. ฤूόʔScrollViewͱฤूΤϦΞScrollView

  74. ฤूόʔScrollViewͱฤूΤϦΞScrollView

  75. ̐૚ͷScrollViewͷUI [࠷લ໘] ฤूόʔScrollViewɹ✅ ೾ܗCollectionViewɹ ࣌ؒCollectionView ฤूΤϦΞScrollViewɹ✅ [࠷എ໘]

  76. ೾ܗCollectionView جຊ͸ऩ࿥ͱಉ͡ ೾ܗͷηϧ಺ʹ࣌ؒͷϝϞϦΛ௥Ճ

  77. ೾ܗCollectionView

  78. ೾ܗCollectionView

  79. ೾ܗCollectionView

  80. ೾ܗCollectionView

  81. ̐૚ͷScrollViewͷUI [࠷લ໘] ฤूόʔScrollViewɹ✅ ೾ܗCollectionViewɹ✅ ࣌ؒCollectionViewɹ ฤूΤϦΞScrollViewɹ✅ [࠷എ໘]

  82. ࣌ؒCollectionView

  83. ࣌ؒCollectionView

  84. ࣌ؒCollectionView

  85. ࣌ؒCollectionView

  86. Ի੠ฤूUI UIͷશମߏ଄ ̐૚ͷScrollViewͷUI ̐૚ͷScrollViewͷ࿈݁ɹ ฤूΤϦΞUI Ի੠࠶ੜUI

  87. ̐૚ͷScrollViewΛ࿈݁͢Δ ࠷લྻͷScrollViewͷdelegateͰ εΫϩʔϧྔΛऔಘ͠ଞͷScrollViewʹ൓ө

  88. ฤूΤϦΞUI

  89. ฤूΤϦΞUI

  90. ฤूΤϦΞUI

  91. ฤूΤϦΞUI

  92. ฤूΤϦΞUI

  93. Ի੠ฤूUI UIͷશମߏ଄ ̐૚ͷScrollViewͷUI ̐૚ͷScrollViewͷ࿈݁ ฤूΤϦΞUIɹ Ի੠࠶ੜUI

  94. ฤूΤϦΞUI (ࠨ)

  95. ฤूΤϦΞUI

  96. ฤूΤϦΞUI (ӈ)

  97. ฤूΤϦΞUI

  98. Ի੠ฤूUI UIͷશମߏ଄ ̐૚ͷScrollViewͷUI ̐૚ͷScrollViewͷ࿈݁ ฤूΤϦΞUI Ի੠࠶ੜUIɹ

  99. Ի੠࠶ੜUI

  100. Ի੠࠶ੜUI

  101. Ի੠࠶ੜUI

  102. Ի੠࠶ੜUI

  103. ࣮૷ͨ͘͠ͳΔԻ੠ฤू • Ի੠ऩ࿥ɹ✅ • Ի੠ऩ࿥UIɹ✅ • Ի੠ฤूUIɹ✅ • Ի੠ฤूɹ •

    ·ͱΊ
  104. Ի੠ฤू ऩ࿥ϑΝΠϧΛ࠶ੜ͸AVAudioPlayer ฤूॲཧ͸AVAssetExportSession

  105. Ի੠ฤू Ի੠ฤूΫϥεͷશମߏ੒ Ի੠ฤू

  106. Ի੠ฤू Ի੠ฤूΫϥεͷશମߏ੒ɹ Ի੠ฤू

  107. Ի੠ऩ࿥Ϋϥεͷશମߏ੒ AudioEditorManager ⌞RecorderFileHandler (ϑΝΠϧ؅ཧ) ⌞AudioPlayer (AVAudioPlayerͷ؅ཧ) ⌞AudioEditorHandler (AVAssetExportSessionͰฤू)

  108. Ի੠ऩ࿥Ϋϥεͷશମߏ੒ AudioEditorManagerɹ ⌞RecorderFileHandlerɹ✅ ऩ࿥ͱಉ͡ (ϑΝΠϧ؅ཧ) ⌞AudioPlayerɹ✅ ϥοϓॲཧͷΈ (AVAudioPlayerͷ؅ཧ) ⌞AudioEditorHandlerɹ✅ ηοτΞοϓͳ͠

    (AVAssetExportSessionͰฤू)
  109. AudioEditorManager

  110. Ի੠ฤू Ի੠ฤूΫϥεͷશମߏ੒ Ի੠ฤू ɹ

  111. Ի੠ฤू AudioEditorManagerɹલॲཧ ⌞RecorderFileHandler (ϑΝΠϧ؅ཧ) ⌞AudioPlayer (AVAudioPlayerͷ؅ཧ) ⌞AudioEditorHandler (AVAssetExportSessionͰฤू)

  112. Ի੠ฤू AudioEditorManager ⌞RecorderFileHandler (ϑΝΠϧ؅ཧ) ⌞AudioPlayer (AVAudioPlayerͷ؅ཧ) ⌞AudioEditorHandlerɹԻ੠ϑΝΠϧฤू (AVAssetExportSessionͰฤू)

  113. AudioEditorHandler

  114. AudioEditorHandler - func edit

  115. AudioEditorHandler - func edit

  116. AudioEditorHandler - func edit

  117. AudioEditorHandler - func edit

  118. Ի੠ฤू AudioEditorManagerɹલॲཧ ⌞RecorderFileHandler (ϑΝΠϧ؅ཧ) ⌞AudioPlayer (AVAudioPlayerͷ؅ཧ) ⌞AudioEditorHandler (AVAssetExportSessionͰฤू)

  119. Ի੠ฤू

  120. AudioEditorHandler - func edit

  121. AudioEditorManager - func edit

  122. AudioEditorManager - func edit

  123. AudioEditorManager - func edit

  124. AudioEditorManager - func edit

  125. AudioEditorManager - func edit

  126. ޙ൒ઓऴྃʂ

  127. ࣮૷ͨ͘͠ͳΔԻ੠ฤू • Ի੠ऩ࿥ɹ✅ • Ի੠ऩ࿥UIɹ✅ • Ի੠ฤूUIɹ✅ • Ի੠ฤूɹ✅ •

    ·ͱΊɹ
  128. ·ͱΊ ✅AVAudioRecorderͰ೾ܗΛऔಘ ✅೾ܗΛ̍ͭͷCellͱͯ͠CollectionViewͰදࣔ ✅4૚ͷScrollViewͰฤूൣғΛදࣔ ✅ࢦఆͨ͠ൣғΛAVAssetExportSessionͰฤू

  129. ࣮૷ͨ͘͠ͳ͔ͬͨͳʁ ※RadiotalkΛҰॹʹ։ൃͨ͘͠ͳͬͨਓ͸ @fairy_engineer·ͰDM͍ͩ͘͞

  130. Just Do It

  131. ==============͓·͚==============

  132. Ի੠ऩ࿥Ϋϥεͷશମߏ੒ RecorderManager ⌞RecorderFileHandlerɹ (ϑΝΠϧ؅ཧ) ⌞RecorderSessionHandler (AudioSessionͷ؅ཧ) ⌞RecorderHandler (AVAudioRecorderΛ؅ཧ)

  133. Ի੠ϑΝΠϧΛ४උ͢ΔͨΊͷΫϥε

  134. Ի੠ऩ࿥Ϋϥεͷશମߏ੒ RecorderManager ⌞RecorderFileHandler (ϑΝΠϧ؅ཧ) ⌞RecorderSessionHandlerɹ (AudioSessionͷ؅ཧ) ⌞RecorderHandler (AVAudioRecorderΛ؅ཧ)

  135. AVAudioSessionΛηοτΞοϓ

  136. Ի੠ฤू AudioEditorManager ⌞RecorderFileHandler (ϑΝΠϧ؅ཧ) ⌞AudioPlayer (AVAudioPlayerͷ؅ཧ)ɹ ⌞AudioEditorHandler (AVAssetExportSessionͰฤू)

  137. AudioPlayer