Upgrade to Pro — share decks privately, control downloads, hide ads and more …

実装したくなる音声編集

Yosei
September 21, 2020

 実装したくなる音声編集

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

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

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

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

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

Yosei

September 21, 2020
Tweet

More Decks by Yosei

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. σϞ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Ի੠ऩ࿥
    Ի੠ऩ࿥͸AVAudioRecorderͰߦ͏

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. AVAudioRecorderΛηοτΞοϓ

    View Slide

  15. AVAudioRecorderΛηοτΞοϓ

    View Slide

  16. AVAudioRecorderΛηοτΞοϓ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. ೾ܗΛऔಘ

    View Slide

  24. ೾ܗΛऔಘ

    View Slide

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

    View Slide

  26. ೾ܗΛऔಘ

    View Slide

  27. ೾ܗΛऔಘ

    View Slide

  28. ೾ܗΛऔಘ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. UIશମߏ੒


    View Slide

  34. UIશମߏ੒

    View Slide

  35. UIશମߏ੒

    View Slide

  36. UIશମߏ੒


    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. UICollectionViewDataSource

    View Slide

  43. UICollectionViewDataSource

    View Slide

  44. UICollectionViewCell

    View Slide

  45. UICollectionViewDelegateFlowLayout

    View Slide

  46. UICollectionViewDelegateFlowLayout

    View Slide

  47. UICollectionViewDelegateFlowLayout

    View Slide

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

    View Slide

  49. ऩ࿥࣌ͷUI੍ޚ

    View Slide

  50. λΠϚʔͰUI੍ޚ

    View Slide

  51. λΠϚʔͰUI੍ޚ

    View Slide

  52. λΠϚʔͰUI੍ޚ

    View Slide

  53. λΠϚʔͰUI੍ޚ

    View Slide

  54. λΠϚʔͰUI੍ޚ

    View Slide

  55. λΠϚʔͰUI੍ޚ

    View Slide

  56. λΠϚʔͰUI੍ޚ

    View Slide

  57. λΠϚʔͰUI੍ޚ

    View Slide

  58. λΠϚʔͰUI੍ޚ

    View Slide

  59. λΠϚʔͰUI੍ޚ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  64. Ի੠ฤूUI

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  68. UIશମߏ੒

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  77. ೾ܗCollectionView

    View Slide

  78. ೾ܗCollectionView

    View Slide

  79. ೾ܗCollectionView

    View Slide

  80. ೾ܗCollectionView

    View Slide

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

    View Slide

  82. ࣌ؒCollectionView

    View Slide

  83. ࣌ؒCollectionView

    View Slide

  84. ࣌ؒCollectionView

    View Slide

  85. ࣌ؒCollectionView

    View Slide

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

    View Slide

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

    View Slide

  88. ฤूΤϦΞUI

    View Slide

  89. ฤूΤϦΞUI

    View Slide

  90. ฤूΤϦΞUI

    View Slide

  91. ฤूΤϦΞUI

    View Slide

  92. ฤूΤϦΞUI

    View Slide

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

    View Slide

  94. ฤूΤϦΞUI (ࠨ)

    View Slide

  95. ฤूΤϦΞUI

    View Slide

  96. ฤूΤϦΞUI (ӈ)

    View Slide

  97. ฤूΤϦΞUI

    View Slide

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

    View Slide

  99. Ի੠࠶ੜUI

    View Slide

  100. Ի੠࠶ੜUI

    View Slide

  101. Ի੠࠶ੜUI

    View Slide

  102. Ի੠࠶ੜUI

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  109. AudioEditorManager

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  113. AudioEditorHandler

    View Slide

  114. AudioEditorHandler - func edit

    View Slide

  115. AudioEditorHandler - func edit

    View Slide

  116. AudioEditorHandler - func edit

    View Slide

  117. AudioEditorHandler - func edit

    View Slide

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

    View Slide

  119. Ի੠ฤू

    View Slide

  120. AudioEditorHandler - func edit

    View Slide

  121. AudioEditorManager - func edit

    View Slide

  122. AudioEditorManager - func edit

    View Slide

  123. AudioEditorManager - func edit

    View Slide

  124. AudioEditorManager - func edit

    View Slide

  125. AudioEditorManager - func edit

    View Slide

  126. ޙ൒ઓऴྃʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  130. Just Do It

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  135. AVAudioSessionΛηοτΞοϓ

    View Slide

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

    View Slide

  137. AudioPlayer

    View Slide