実装したくなる音声編集

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

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

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

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

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

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