iOS HW9結合圖片、文字、button 的 UIKit IBAction 練習題_0822

本周作業蠻有趣的，可以互動的方式撥放聲音，第一時間想到周杰倫的歌- "聽見下雨的聲音"，希望能撥放一些大自然的聲音，於是展開本次作業執行。

PS:周董真是我每次做APP的靈感來源之一!(真的膜拜一下)

於是開始尋找聲音相關的素材，剛好找到這個網站有很多mp3聲音素材

小森平的免費下載音效

花了不少時間挑選自己喜歡的聲音，彙整幾個聲音的mp3連結

接著尋找對應的圖片素材，也花了不少時間

不知道有沒有比較好的圖片剪裁，譬如我想要的圖片修改步驟如下：不同大小的尺寸圖片，改存成同樣大小，並且裁切成圓角矩形，再存png

但我找了很多線上編輯圖片的軟體，都有點單一，不能一次到位，我最後是用ppt編輯圖片，再轉存png，希望有人能推薦好的線上編輯圖片軟體。

後續把圖片和按鈕放上去APP裡面，排版畫面如下：

相關程式碼：

import UIKit
import AVFAudio
import AVKit


class ViewController: UIViewController {

    var player = AVPlayer()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    @IBAction func speak(_ sender: Any) {
        
        let url = URL(string: "https://taira-komori.jpn.org/sound_os2/nature01/thunder1.mp3")!
        let playerItem = AVPlayerItem(url:url)
        player = AVPlayer(playerItem: playerItem)
        player.play()
       // utterance.voice = AVSpeechSynthesisVoice(langage "zh-TW")
    }
  
    @IBAction func fall(_ sender: Any) {
        let url = URL(string: "https://taira-komori.jpn.org/sound_os2/environment01/fall_streets1.mp3")!
        let playerItem = AVPlayerItem(url: url)
        player = AVPlayer(playerItem: playerItem)
        player.play()
        
        
        
    }
    @IBAction func smile(_ sender: Any) {
        let url = URL(string: "https://taira-komori.jpn.org/sound_os2/nature01/rain_thunder1.mp3")!
        let playerItem = AVPlayerItem(url:url)
        player = AVPlayer(playerItem: playerItem)
        player.play()
    }
  
    
    @IBAction func river2(_ sender: Any) {
        let url = URL(string: "https://taira-komori.jpn.org/sound_os2/nature01/mountain_stream.mp3")!
        let playerItem = AVPlayerItem(url:url)
        player = AVPlayer(playerItem: playerItem)
        player.play()
        
        
    }
    
    @IBAction func morning(_ sender: Any) {
        let url = URL(string: "https://taira-komori.jpn.org/sound_os2/environment01/town_morning.mp3")!
        let playerItem = AVPlayerItem(url:url)
        player = AVPlayer(playerItem: playerItem)
        player.play()
        
    }
    
    @IBAction func street2(_ sender: Any) {
        let url = URL(string: "https://taira-komori.jpn.org/sound_os2/event01/Japanese_festival1.mp3")!
        let playerItem = AVPlayerItem(url:url)
        player = AVPlayer(playerItem: playerItem)
        player.play()

        
    }

其實，程式算蠻固定，拉線命名，再改mp3網址即可

APP做好之後會需要錄螢幕畫面與聲音，原本內建的錄影只有電腦畫面沒電腦系統聲音，於是找了這篇，安裝Soundflower套件，安裝要打開權限並且重新開機一遍，再加上QuickTime錄影即可完成，雖然也是花了一點時間摸索!

https://medium.com/@fangyu070899/mac%E8%9E%A2%E5%B9%95%E9%8C%84%E5%BD%B1%E5%B7%A5%E5%85%B7-soundflower-8a7bf0fd22a5

最後做好的成果APP

心得：

1. 程式碼還有一些知其然不知其所以然的地方，希望在搞懂一下。
2. 這個聲音的網站素材很豐富，找聲音和找素材蠻有趣，覺得好像在當導演找適合的聲音素材放到電影裡面。
3. APP的美觀排版真的影響蠻大，些微的細節眼睛其實都看的出來差異，不過本人還在培養美感當中。
4. Button拉線的時候要命名Action，但是發現有問題時，我後來建議都是把有問題的Button刪掉，那段程式碼刪掉，避免影響到後續，然後再重新放一個Button並重新拉線，比較不會出錯。