注： react 环境 ，图片自行替换， 支持多音频切换播放，没有暂停续播功能
    需要自行在外部父组件加入 

    1. import React, { Component } from 'react'
    2. import audio_play_1 from 'Images/audio_play_1.svg'
    3. import audio_play_2 from 'Images/audio_play_2.svg'
    4. import audio_play_3 from 'Images/audio_play_3.svg'
    5. import audio_play_0 from 'Images/audio_icon.svg'
    7. export default class AudioPlayBtn extends Component {
    8.   constructor(props) {
    9.     super(props)
    10.     this.state = {
    11.       audioBtnImg: audio_play_0,
    12.       animationFlag: false
    13.     }
    14.     this.timer = null
    15.     this.imgCount = 0
    16.     this.imgs = {
    17.       audio_play_0: audio_play_0,
    18.       audio_play_1: audio_play_1,
    19.       audio_play_2: audio_play_2,
    20.       audio_play_3: audio_play_3
    21.     }
    22.   }
    24.   componentDidMount() {
    25.     this.addEventListenerFn()
    26.   }
    28.   closeAudioPlay() {
    29.     const audio = document.getElementById('chatAudio')
    30.     audio.url = ''
    31.     window.clearInterval(this.timer)
    32.     this.timer = null
    33.     this.imgCount = 0
    34.     this.setState({
    35.       audioBtnImg: audio_play_0
    36.     })
    37.   }
    39.   /** 播放音频 */
    40.   startAudio() {
    41.     const audio = document.getElementById('chatAudio')
    42.     if (this.timer) return false
    43.     audio.src = this.props.url
    44.     audio.play()
    45.   }
    47.   changeFlag(flag) {
    48.     if (flag) {
    49.       this.timer = window.setInterval(() => {
    50.         if (this.imgCount >= 3) {
    51.           this.imgCount = 0
    52.         }
    53.         this.setState({
    54.           audioBtnImg: this.imgs[`audio_play_${ this.imgCount }`]
    55.         })
    56.         this.imgCount++
    57.       }, 400)
    58.     } else {
    59.       this.closeAudioPlay()
    60.     }
    61.   }
    63.   addEventListenerFn() {
    64.     const that = this
    65.     const audio = document.getElementById('chatAudio')
    66.     if (audio) {
    67.       audio.loop = false
    68.       audio.addEventListener('ended', function() {
    69.         that.closeAudioPlay()
    70.       }, false)
    71.       audio.addEventListener('timeupdate', function() {
    72.         if (audio.currentSrc !== '' && audio.currentSrc !== that.props.url) {
    73.           that.closeAudioPlay()
    74.         } else {
    75.           if (!that.timer) that.changeFlag(true)
    76.         }
    77.       })
    78.     }
    79.   }
    81.   render() {
    82.     return (
    83.       <div onClick={ this.startAudio.bind(this) }>
    84.         <img src={ this.state.audioBtnImg } alt='' />
    85.       </div>
    86.     )
    87.   }
    88. }