跟我学Rx编程——调皮的背景音乐按钮

有些H5的页面会有一个按钮控制背景音乐播放，如果只是单一页面的话，没有什么逻辑可言。但如果涉及到转场，那么逻辑就复杂起来。

涉及操作符

partition
switchMapTo
takeUntil

业务逻辑

点击背景音乐按钮，则播放音乐，再次点击暂停播放音乐
当切换场景的时候，如果音乐正在播放，则切换新的场景的背景音乐
当切换场景的时候，如果音乐已经暂停，则等待点击后再播放新的音乐
当有音乐的时候，按钮播放旋转动画，暂停播放时按钮静止不动

对于使用者来说再正常不过的逻辑，开发起来却不是那么容易，因为涉及到声音的加载，切换，暂停和响应点击等。

这次我们不再写常规操作，大家可以自行脑补。

RxJS实现

首先我们定义播放按钮的事件流，以及切换场景的事件流

代码语言：javascript复制

let playMusicClickOb = fromEvent(musicBn, 'click')
let changeStageOb = ...//此处省略创建过程

接下来我们需要通过partition操作符分离出两个事件流

代码语言：javascript复制

let [playingStageOb, muteStageOb] = changeStageOb.pipe(partition(_ => isPlaying))

当切换场景的时候，正在播放和没有播放的情况分成两个事件流对象playingStageOb和muteStageOb

接下来我们就可以利用上面定义好的4个事件流组合成我们要的逻辑了

代码语言：javascript复制

rxjs.merge(playingStageOb, muteStageOb.pipe(switchMapTo(playMusicClickOb.pipe(take(1)), outv => outv))).pipe(map((index => {
            playAni()//按钮旋转动画
            return Laya.SoundManager.playMusic('stage'   index   ".mp3")
        })), switchMapTo(playMusicClickOb.pipe(takeUntil(muteStageOb)), outV => outV)).subscribe(channel => {
            if (isPlaying) {
                channel.pause()
                stopAni()//停止按钮旋转动画
            } else {
                channel.resume()
                playAni()//按钮旋转动画
            }
        })

分析

代码中分为三个功能区

加载音乐并播放

代码语言：javascript复制

playAni()//按钮旋转动画
return Laya.SoundManager.playMusic('stage'   index   ".mp3")

暂停播放

代码语言：javascript复制

channel.pause()
stopAni()//停止按钮旋转动画

恢复播放

代码语言：javascript复制

channel.resume()
playAni()//按钮旋转动画

这个三块功能何时执行，是本案最为关键的部分。我们来分析

代码语言：javascript复制

rxjs.merge(playingStageOb, muteStageOb.pipe(switchMapTo(playMusicClickOb.pipe(take(1)), outv => outv))).pipe(map((index => {

首先，最后的map操作符是为了把场景的序号转换成对应的mp3文件名，这个没什么好说的，可以忽略

代码语言：javascript复制

map((index => {

所以核心逻辑就是

代码语言：javascript复制

rxjs.merge(playingStageOb, muteStageOb.pipe(switchMapTo(playMusicClickOb.pipe(take(1)), outv => outv)))

我们观察，最外层是merge操作即

代码语言：javascript复制

rxjs.merge(playingStageOb, muteStageOb.pipe(...))

意思是转场事件触发的事件流，包括正在播放音乐时转场，以及不在播放音乐时转场。其中不在播放音乐时转场还有后续的操作即

代码语言：javascript复制

switchMapTo(playMusicClickOb.pipe(take(1)), outv => outv)

这句话的意思是，如果在静音的时候转场，就会开始监听playMusicClickOb，即按钮点击事件，take(1)只取一次事件，就立即关闭，目的是组合出那种状态即——静音后转场，然后又点击了播放音乐的按钮。合起来，就是在下面两种情况之一就执行加载音乐并播放音乐和动画的逻辑

1. 正在播放音乐时转场

2. 静音时转场，然后点击了播放音乐的按钮

下面我们分析以下的逻辑：

代码语言：javascript复制

})), switchMapTo(playMusicClickOb.pipe(takeUntil(muteStageOb)), outV => outV)).subscribe(channel => {

这段逻辑建立在之前已经加载音乐并且播放起来后执行。当之前的逻辑执行后，我们通过switchMapTo切换成后面这个事件流

代码语言：javascript复制

playMusicClickOb.pipe(takeUntil(muteStageOb)), outV => outV)

即如果此时点击了音乐按钮，就会触发直到收到了静音转场的事件。什么意思？就是说此时用户点击了音乐播放按钮，就会在暂停和播放两种状态切换。直到我们暂停的情况下转场了，就不再监听。为什么是这样设计呢？假设我们此时切换了暂停和播放若干次，我们要转场了，如果此时正好在暂停状态，那么我转场后，是什么状态呢？对了，就是上面

2. 静音时转场，然后点击了播放音乐的按钮

的状态，看到没，所以我们使用takeUntil来终止当前事件流。如果是播放音乐的状态下转场了呢？这就回到了上面的

1. 正在播放音乐时转场

的状态，会执行加载音乐并播放的逻辑，但我们的切换暂停和播放的功能依旧需要运行，所以在takeUntil中我们只有一种情况需要终止当前事件流就是muteStageOb

是不是有点绕，多想想就能明白利用Rx编程，我们复用了事件流对象，组合出了各种状态下的逻辑，并将实际执行代码压缩到最精简，假如有逻辑需求变化，也能很快修改。比如我们需要一开始就播放音乐，只需要在merge里面加一个of(0)——参数0没有任何意义，纯粹为了触发事件

代码语言：javascript复制

rxjs.merge(of(0),playingStageOb, muteStageOb......

map merge mp3 partition 事件

0 人点赞