基於react的audio組件

樣式請本身定義哦~
須要其餘功能請自行添加！

// 組件調用
<Audio src={src地址} id={srcID}/>

audio屬性

• src 歌曲的路徑

• preload 是否在頁面加載後當即加載（設置autoplay後無效）

• controls 顯示audio自帶的播放控件

• loop 音頻循環

• autoplay 音頻加載後自動播放

• currentTime 音頻當前播放時間

• duration 音頻總長度

• ended 音頻是否結束

• muted 音頻靜音爲true

• volume 當前音頻音量

• readyState 音頻當前的就緒狀態

audio事件

• abort 當音頻/視頻的加載已放棄時

• canplay 當瀏覽器能夠播放音頻/視頻時

• canplaythrough 當瀏覽器可在不因緩衝而停頓的狀況下進行播放時

• durationchange 當音頻/視頻的時長已更改時

• emptied 當目前的播放列表爲空時

• ended 當目前的播放列表已結束時

• error 當在音頻/視頻加載期間發生錯誤時

• loadeddata 當瀏覽器已加載音頻/視頻的當前幀時

• loadedmetadata 當瀏覽器已加載音頻/視頻的元數據時

• loadstart 當瀏覽器開始查找音頻/視頻時

• pause 當音頻/視頻已暫停時

• play 當音頻/視頻已開始或再也不暫停時

• playing 當音頻/視頻在已因緩衝而暫停或中止後已就緒時

• progress 當瀏覽器正在下載音頻/視頻時

• ratechange 當音頻/視頻的播放速度已更改時

• seeked 當用戶已移動/跳躍到音頻/視頻中的新位置時

• seeking 當用戶開始移動/跳躍到音頻/視頻中的新位置時

• stalled 當瀏覽器嘗試獲取媒體數據，但數據不可用時

• suspend 當瀏覽器刻意不獲取媒體數據時

• timeupdate 當目前的播放位置已更改時

• volumechange 當音量已更改時

• waiting 當視頻因爲須要緩衝下一幀而中止

組件結構

<div className="audioBox">
  <audio 
    id={`audio${id}`}
    src={src}
    preload={true}
    onCanPlay={() => this.controlAudio('allTime')}
    onTimeUpdate={(e) => this.controlAudio('getCurrentTime')}
  >
    您的瀏覽器不支持 audio 標籤。
  </audio>  
  <i 
    className={isPlay ? 'pause' : 'play'} 
    onClick={() => this.controlAudio(isPlay ? 'pause' : 'play')}
  />
  <span className="current">
    {this.millisecondToDate(currentTime)+'/'+this.millisecondToDate(allTime)}
  </span>
  <input 
    type="range" 
    className="time" 
    step="0.01" 
    max={allTime}     
    value={currentTime}  
    onChange={(value) => this.controlAudio('changeCurrentTime',value)} 
  />
  <i 
    className={isMuted ? 'mute' : 'nomute'} 
    onClick={() => this.controlAudio('muted')}
  />
  <input 
    type="range" 
    className="volume"
    onChange={(value) => this.controlAudio('changeVolume',value)} 
    value={isMuted ? 0 : volume} 
  />
</div>

組件javascript

constructor(props) {
    super(props)
    this.state = {
      isPlay: false,
      isMuted: false,
      volume: 100,
      allTime: 0,
      currentTime: 0
    }
  }
  
  millisecondToDate(time) {
    const second = Math.floor(time % 60)
    let minite = Math.floor(time / 60)
    // let hour
    // if(minite > 60) {
    //   hour = minite / 60
    //   minite = minite % 60
    //   return `${Math.floor(hour)}:${Math.floor(minite)}:${Math.floor(second)}`
    // }
    return `${minite}:${second >= 10 ? second : `0${second}`}`
  }

  controlAudio(type,value) {
    const { id,src } = this.props
    const audio = document.getElementById(`audio${id}`)
    switch(type) {
      case 'allTime':
        this.setState({
          allTime: audio.duration
        })
        break
      case 'play':
        audio.play()
        this.setState({
          isPlay: true
        })
        break
      case 'pause':
        audio.pause()
        this.setState({
          isPlay: false
        })
        break
      case 'muted':
        this.setState({
          isMuted: !audio.muted
        })
        audio.muted = !audio.muted
        break
      case 'changeCurrentTime':
        this.setState({
          currentTime: value
        })
        audio.currentTime = value
        if(value == audio.duration) {
          this.setState({
            isPlay: false
          })
        }
        break
      case 'getCurrentTime':
        this.setState({
          currentTime: audio.currentTime
        })
        if(audio.currentTime == audio.duration) {
          this.setState({
            isPlay: false
          })
        }
        break
      case 'changeVolume':
        audio.volume = value / 100
        this.setState({
          volume: value,
          isMuted: !value
        })
        break  
    }
  }