爬虫 + 小程序 自定义开发一个听书程序

最近工作之余会听听评书，但主流门户收费加广告着实让人烦躁。作为IT人，怎能如此顺应别人家的产品规则。

下面以 python + taro 为例，写一个爬虫 + 小程序的播放应用：

最终实现的效果如下：

参见我的简书

原本听的喜马拉雅，但是资源有限。找到了个简陋的听书站点，资源是有了，但是广告一堆、交互生硬，谈不上用户体验了。

所以，爬它

爬虫

脚本不多，大概说下步骤：

• 获取全本的播放页面链接
• 循环页面链接获取每回的实际播放链接
• 重新组织数据结构打印输出

最终要的就是打印的 这个数据

完整脚本如下：

# -*-coding:utf-8-*-
import requests
from bs4 import BeautifulSoup

session = requests.session()
headers = {
        'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0',
        'accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
        'accept-language': 'zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2',
        'accept-encoding': 'gzip, deflate, br',
    }

def getHrefs(url):
    r = session.get(url,headers=headers, verify=False)
    r.encoding = 'GBK'
    soup = BeautifulSoup(r.text, 'lxml')
    rich_media_content = soup.find_all('div', class_='player')
    playDatas = []
    for item in rich_media_content:
        playData = item.find("a").attrs['href']
        playData = playData.replace('//','http://')
        playData = playData.replace('play','playdata')
        playDatas.append({
            'playData': playData,
            'title': item.find("a").text
        })

    return playDatas

def getPlayUrls(bookTitle, playDatas):
    if len(playDatas) == 0:
        return
    playUrls = []
    for index, item in enumerate(playDatas):
        r = session.post(item['playData'], headers=headers, verify=False)
        resp = r.json()
        playUrls.append({
            'playUrl': resp['urlpath'].replace('flv','mp3'),
            'title': '{bookTitle}-{title}'.format(bookTitle=bookTitle, title=item['title']),
            'id': index,
            'played': 0,
        })
    return playUrls

if __name__ == "__main__":
    bookTitle = 'xxxx第六部'
    playDatas = getHrefs('http://xxxx.xxxx.xxx/xxxxx/')
    playUrls = getPlayUrls(bookTitle, playDatas)
    print(playUrls)

小程序

既然是给自己用的，就没必要搞的太复杂了。直接把爬到的数据放应用本地吧，加上一个播放列表，一个播放详情页面即可。
我本身用react较顺手，选择了Taro框架写小程序，顺便用了下Taro-UI组件库。

列表页面

...

componentDidShow () {
    const songId = Taro.getStorageSync('songId')
    const songList = Taro.getStorageSync('songList')
    if (songList) {
      this.setState({listData: songList})
    }else {
      Taro.setStorageSync('songList', this.state.listData)
    }
    if (songId) {
      this.setState({ songId })
    }
}
...

<View className='index'>
    <AtList>
      {listData && listData.map((item,index) => (
        <AtListItem
          title={item.title}
          arrow='right'
          extraText={this.getExtraText(songId,item)}
          onClick={()=>this.handleClick(index)}
        />
        ))}
    </AtList>
</View>

详情页面

详情页面主要做的是：获取从列表来的ID，播放这个回目，播放控制，自动下一首，记录当前播放的回目及时间。

核心代码如下

...
startPlay = (itemIndex) => {
    const songId = Taro.getStorageSync('songId')
    let playTime = 0
    if (songId && songId.toString() === itemIndex.toString()) {
      playTime = Taro.getStorageSync('playTime')
    }
    const {listData} = this.state;
    const musicInfo = {
      name: listData[itemIndex].title,
      playUrl: listData[itemIndex].playUrl,
      itemIndex: parseInt(itemIndex),
      playTime: playTime
    }
    this.setState({
      musicInfo,
    }, () => {
      Taro.setNavigationBarTitle({title: listData[itemIndex].title})
      this.autoPlay(musicInfo)
    })
  }
...
autoPlay = (musicInfo) => {
    const bgMusic = Taro.getBackgroundAudioManager();
    this.setState({
      myAudio: bgMusic
    },() => {
      const songList = Taro.getStorageSync('songList')
      songList[musicInfo.itemIndex].played = 1;
      Taro.setStorageSync('songList', songList)
    })
    Taro.setStorageSync('songId', musicInfo.itemIndex)
    bgMusic.src = musicInfo.playUrl
    bgMusic.title = musicInfo.name
    if (musicInfo.playTime > 0) {
      bgMusic.startTime = musicInfo.playTime
    }else {
      bgMusic.startTime = 0
    }
    bgMusic.onTimeUpdate(() => {
      this.setState({
        timeLenght: bgMusic.duration,
        playTime: bgMusic.currentTime
      }, () => {
        Taro.setStorageSync('playTime', bgMusic.currentTime)
      })
    })
    bgMusic.onEnded(() => {
      this.next();
    })
    bgMusic.onError(() => {
      Taro.atMessage({
        'message': '播放错误，自动播放下一首',
        'type': 'error',
        'duration': 1500
      })
      setTimeout(() => {
        this.next();
      }, 2000)
    })
  }

ok, 打开微信开发者工具，加载打包文件，扫个体验码，自嗨去吧~~