実装したくなる音声編集

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

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

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

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

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

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