86課:開發(fā)一個App,追溯巴赫音樂作品

課程筆記文集地址:Udemy課程:The Complete iOS 9 Developer Course - Build 18 Apps

在這一節(jié)里,我們需要開發(fā)一個有關巴赫音樂的App,能顯示巴赫的圖片,還能顯示音樂播放的進度,能通過調整進度條,跳到音樂的某個點開始播放。當然了,之前學習的播放、暫停和音量控制,也有在這里出現(xiàn)。注意多了一個停止鍵,和暫停的鍵的區(qū)別,暫停之后再播放繼續(xù)之前的進度繼續(xù)聽,如果按了停止鍵,再按播放鍵就會從音頻的開頭開始播放。

先上最終效果圖:

一、布局 Storyboard

1、放置各種控件

新建工程,在 Storyboard 里,拖入一個 Navigation Bar,修改 Title,如下圖:


拖入 Bar Button Item,放到 Navigation Bar 上,設置成播放圖標樣式(可以使用 System Item 樣式),進行 AutoLayout 布局,約束條件如下圖:

拖入 Toolbar 控件,設置 AutoLayout 約束。拖入 Bar Button Item 修改圖標樣式,拖入 Flexible Space Bar Button Item。

下載一張巴赫的圖片,放到 Xcode 里。在 Storyboard 中拖入 ImageView 控件,設置 AutoLayout 約束,顯示巴赫的圖片。

拖入兩個 UISlider 控件,設置 AutoLayout 約束,其中表示播放進度的 Slider 的 Current 的值為 0,音量 Slider 不用變動,0.5 居中就可以。

2、創(chuàng)建 Action 連接

@IBAction func play(sender: AnyObject) {
}

@IBAction func adjustVolume(sender: UISlider) {
}
//這個調整播放進度的方法,命名好奇怪 scrub。。。
@IBAction func scrub(sender: UISlider) {
}

@IBAction func pause(sender: AnyObject) {
}

@IBAction func stop(sender: AnyObject) {
}

3、創(chuàng)建 Outlet 連接

只有一個,就是控制播放進度的 Slider:

@IBOutlet var scrubSlider: UISlider!

二、有 音頻 有關的設置

1、初步設置

首先找到一個音頻文件,把 .mp3 文件直接拖到 Xcode 里,注意勾選 Copy items if needed,如下圖:


點擊 Finish,然后目錄里就有了這個音頻啦~

2、AVFoundation

在類文件里進行基本設置:


三、代碼實現(xiàn)對音頻文件的三種控制方式

1、創(chuàng)建音樂的路徑,創(chuàng)建音頻控制實例

在 viewDidLoad 里實現(xiàn)即可:

let audioPath = NSBundle.mainBundle().pathForResource("bach", ofType: "mp3")!
do {            
    try player = AVAudioPlayer(contentsOfURL: NSURL(fileURLWithPath: audioPath))           
} catch {          
    // 出現(xiàn)報錯在這個地方進行處理          
}

2、實現(xiàn)不同按鈕的控制效果

@IBAction func play(sender: AnyObject) {
    player.play() //開始播放音頻
}

@IBAction func adjustVolume(sender: UISlider) {
    player.volume = sender.value
}

//這個調整播放進度的方法,命名好奇怪 scrub。。。
@IBAction func scrub(sender: UISlider) {
}

@IBAction func pause(sender: AnyObject) {
    player.pause() //停止播放音頻
}

@IBAction func stop(sender: AnyObject) {
    player.pause()
    let audioPath = NSBundle.mainBundle().pathForResource("bach", ofType: "mp3")!
    do {            
        try player = AVAudioPlayer(contentsOfURL: NSURL(fileURLWithPath: audioPath))         
    } catch {          
        // 出現(xiàn)報錯在這個地方進行處理          
    }
}

3、實現(xiàn)控制播放進度(新知識點?。。。?/h4>

上面的幾乎實現(xiàn)了所有的控制按鈕,除了調整播放進度,這個我們在之前的課程里沒有涉及到,所以這里專門說一下。

要用到一個新方法:player.currentTime,player.currentTime的類型是 NSTimeInterval。所以只需要將一個 slider 的值轉換成 NSTimeInterval 類型即可。轉換類型的方法都是統(tǒng)一的,NSTimeInterval(),就好像是 String() 一樣。

@IBAction func scrub(sender: UISlider) {
    player.currentTime = NSTimeInterval(sender.value)
}

4、播放進度 Slider 隨著播放進度變化(新知識點!?。。?/h4>

似乎少了點什么,對,就是 Slider 的進度條要是能動的,隨著音樂的播放,進度的變化,要有變化,這個效果如何實現(xiàn)呢?

實際上就是獲取當前音樂的值 player.currentTime 這個方法可以獲取當前音頻播放的時間,把這個時間賦值給 Slider 的值即可,只是,兩個類型不一致,所以需要轉換一下類型:

func updateScrubSlider() {        
    scrubSlider.value = Float(player.currentTime)        
}

然后創(chuàng)建一個 NSTimer,每一秒都執(zhí)行一下上面的這個方法,確保 Slider 的當前值與音頻的播放進度一致。

在 viewDidLoad 里就可以:

    override func viewDidLoad() {
        super.viewDidLoad()
        
        do {        
        try player = AVAudioPlayer(contentsOfURL: NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource("bach", ofType: "mp3")!)) 
            //這一步讓Slider的最大值和音頻的長度對應起來           
            scrubSlider.maximumValue = Float(player.duration)        
        } catch {            
            // It didn't work!            
        }
        
        _ = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: #selector(ViewController.updateScrubSlider), userInfo: nil, repeats: true)       
    }

其實一開始我給 NSTimer 命名了,只是因為從來沒有用到過,所以 Xcode 建議改成 _ 。

其實在實際的開發(fā)中,還是需要命名的,因為我們在某些情況下,需要讓 NSTimer 停止,這時候就會用到了。

OK,到此結束啦~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容