H5音频组件

前言

上一篇简要阐述了H5基于wx-JS-SDK实现音频录制功能，本篇梳理一下音频播放列表组件，对于技术本身组件的实现度并不复杂，但核心就在于考虑组件性能以及逻辑的高聚合。

上一篇-音频录制

DEMO

图片演示了自上而下的点击播放效果：

需求分析

• 点击播放，播放当前，并清除之前状态；
• 正常对应播放、暂停状态；
• 控制音频组件UI展示样式；

思路及实现方式

• 思路

  - 定义参数，组件接收音频资源信息并制定UI样式；
  - 每次点击时，通过监听当前播放索引的变化，已达到控制播放状态的作用；
  - 组件内封装的应是单项音频而不是整个列表，以便于更灵活的使用；
  复制代码
  

• 实现方式

  基于render，性能更优；当然render除了虚拟dom这一性能优势，其实更适用于代码冗长繁琐且重复率较高的场景。
  复制代码
  

组件分析

Props

• 音频长度UI配置 - length；
• 限制音频UI展示总长度 - totalLength；
• 音频资源链接 - audioUrl；
• 当前点击索引（用于与index配合控制icon的展示） - isCtrlIcon；
• 当前索引（用于与isCtrlIc配合控制icon的展示） - index；
• 控制类方法，用于抛出当前播放索引值- stopIconPlay；

Data

• 组建内部用于展示音频状态- isPlay；

Watch

• 监听isCtrlIcon改变isPlay；

Render

• 聚合UI模板，控制单个音频展示长度；

代码层

• 父组件引用

  <template>
     <div class="wrap" id="wrap">
       <div class="audio-list" v-for="(item, index) in listData" :key="index">
         <audioPlan 
            :length="item.times" 
            :isCtrlIcon="isCtrlIcon" 
            :index="index" 
            :stopIconPlay="stopIconPlay" 
            :audioUrl="item.audio_url" 
         />
       </div>
     </div>
    </template>
    
    <script>
    import audioPlan from './audioPlan/audioPlan'
    require('es6-promise').polyfill()
    export default {
      data () {
        return {
          isCtrlIcon: 0,
          listData: [
            {
              times: 5,
              audio_url: ''
            },
            {
              times: 10,
              audio_url: ''
            }
          ]
        }
      },
      methods: {
        stopIconPlay (e) {
          // change icon play
          this.isCtrlIcon = e
        }
      },
      components: {
        audioPlan
      }
    }
    </script>
    
    <style scoped>
    /* @import  引入公共参数配置 */
    .wrap{
      width: 100%;
      height: 100%;
      max-width: 750px;
      margin: 0 auto;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      position: relative;
      background: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wEEEAAWABYAFgAWABcAFgAZABwAHAAZACMAJQAhACUAIwAzAC8AKwArAC8AMwBNADcAOwA3ADsANwBNAHUASQBWAEkASQBWAEkAdQBoAH4AZgBfAGYAfgBoALoAkgCCAIIAkgC6ANcAtQCrALUA1wEFAOkA6QEFAUgBOAFIAa0BrQJBEQAWABYAFgAWABcAFgAZABwAHAAZACMAJQAhACUAIwAzAC8AKwArAC8AMwBNADcAOwA3ADsANwBNAHUASQBWAEkASQBWAEkAdQBoAH4AZgBfAGYAfgBoALoAkgCCAIIAkgC6ANcAtQCrALUA1wEFAOkA6QEFAUgBOAFIAa0BrQJB/8IAEQgFQwLuAwEiAAIRAQMRAf/EABoAAQEBAQEBAQAAAAAAAAAAAAABAgMEBQb/2gAIAQEAAAAA/PiCkWUgAAAAAA126dPTv5rMpAopSlU8dgRYssssAWACxKAAG+m+3LEzoAUGpQqvGUixZUsqWAAAAAAW73nK6CUUDUopfLEWazQSyyoWAAAAAB0c9bWgKAFoPMsEGs1AAAAAAsAFjbRVAFCylPMUkqazRBUAAAAAADVWrZQFAUXzRZZSFlJYolQFgAsAADTSqsoUCwsrzaSKC5KlRSBUALAAAC2qtoBRYVLOOVSiUiosCxUAAAAATYrRVBRQWPPZFSpYLYhUWLFgAACwAtVaGgUUFjzhUJQlWJZbCAAAAAC1aoNKBVBPOBKJZrNsJQJYAAAAAtVaBqhbLKljzooWLBLKipYAWAAAAFtpQW1ZVAPNSSgBLKQFlQAAAABpVpYNUpQVfJZLYuaWQogsFQAAAASrS2gFtNAqvLAWJRKJRKBKiwAAABotUAaaUNK8YTULCWUgsssssWBUAAAGi2aAFtbBrTwrBZZZKJbmypSAogSgWABaVaAW02Wt3wQWFimWoRQQspFILACWwFqqoBbS7VvV+asLBFCW5qFJULKgBYAALaWgFtLd261v5cJagsJQJRKhY1moWAEoA0WlAW2q3u610+PUALAliqguaixUNZAAALS1QDa1b2ut7+MILmrmgJbEKLkpGpLLACwBatoBdW1b16Xe/h1FhbiqQASxQhUFQALAFtVQF1dWr1663r4NlQvXPNYlLEthLFlQ1IFQCwBKtaoBdXWtV1663fgkWa73HPEtiUACWCwBYsLABKW20BdXW7q9uutX8/Kh6Npy5wCaiyUAlllhYsWAABo1SiXTW9616db0/OWVNb6a7+bjiak1JQlSkahFluVlSosAAtW0o01re9+jpu6/NAl69t+Xnmiy5VLc0TUlEsWLBUWLASi1apbbd79HXp00/NSgu5zALLCUJUpFSoqUIsWAAtLo0utdPRvr03fzFAmsliwsqBYlsEKSiCywtiCwC0t1bd9OvTr03r81LKJKVLCoRbBKJRKgsArcylgLAqtt61rp069t384SpRKgAssWWBFQFiypY1tMyWAAFt3rWunTp16dPziUCVKiyaipKSyksqVKiyw1dBjNgsABq71rfXp067/PpQEqLFzSVKsAJY1JSBrYExAWAAutb116dN9PhgAAlglqAFksoiks1sBJMgAANb306dd7+MJQAQXOs0JQslE1JZUutCwGZkAABrfTp03v5Uq5qWUQmoFiW5pKsuaAl3VgBMyAAANdOm+m/miVKACCpUsEoAlsmtgAJiAAAGunTprwgiyksqUEWAWBYihbosAMyQAAA30308YCUEoM6gqS1JqKkKE1dBYDKSFgWAWLrrvzAShLKIogpJpEtgJrNXVBerHOIkWAABre+FEoAQUZqkAllJUs1mruwdrHHNkZssABYNdOYAJQJSUllRKFiwllLdDXRXDJMgAAsGvX5sgAAAJYWFSxFsAXVLvWuXJWIpLACwF+heHmAAASgIsWWFlQsI1q5uqxLMBYsAAD6eXPywAlABKRc6QCaZq5WxbUUzmpZQgAEr7HPLPigAgoAIqCWxc2ahC1RZmUJZUWAAX7nPGGPCAAWSxZZYqBNQlSgUtlwWIFlQWAD9HxxzzOXjACUBFSwLKlQBKJqpE1IsssLLBYBf1XDhz55eXgAAAlAEFJUsAlrKoUgsqLcgD9fy8/HnjM8EAEoJQAQsVFgCUudQRYspBUSg/X55efjzzOHlCUJQEssqVAWLAms0iygSosVBZYD9e5efjz5x84BKAAEqUJUsFgBYIVCiays1lYP2F5efjxxl5OIJQEolAQWFgLBZLFLJZZSakFSyo/Yznx48OeHHygBKASpZUURZUSgLmiUSiBSLA/YZxx5ceWJPCAEoALACWAsBNQAFgSyxYssX9ScuXDniX54SiUCUEoAllipUFRcmpLLKgVLCk/SavPly5YmvDkAAAJQlCLLCwBKsSli5sVKSzWbPv6uefPniXx4AAABKAIsCkLBYE1JRNZssFms37dsxz5w8eACUJQCVKlEqWLKgXJqFRYEqVZCvsWzOMZXxZAAAAAlCWVFRUsShKAJZYsqPr1c4zJfDAEoAAACUJSKSpZUCs0Iq5WF+jupzRnxhKAAACVKSypZZYssLLLCUllEsspfdprORy84gsEoXNAAlEqUipYUkqWxZNRKlEr2bqIebBAAsAABFJQlgudQRrNVBKubFIr16tQnkIBUAAAACUJYssWAFkolLEsufbbQ48YAFgAEpKAEolQUQqVlQi2SprN9loPGCKgJQAAEoARUsABZLNZssazSPconHkgLAAsABKALBFIsJUqwllJQsmvZVZz5gIWAAAAAAAEFZ1AsSllk0zZfbS58gAEWAAAASpUssoQmkmouaWCUTUPddWeLIRQgAAogAAiiWBYCoWJpJZVj6O7z8WQIBRAABKWShKBKlJYozqFQCKj6zz+RYCUAgAAAABKEoJYsVALAE+j5MAAgUgAAACpKllllJQIsWWAWA0AAAIsAFgEoSgBKASkABYsNAAAAAglAAAAABKQqBYsSzYABCkUIAAsAEoCUEoJYC5ompOkAIFAECwEoAAACWVFgsEouaWNAAAAAgAAAACUlSxUCaixYDQAAAAQsAAShFJc6ABKJNJc6RYs0AAAWAECwAAAASkpLLKllQRqNBYAigACLFgABKJQEoAiiCxK1ZYAAAAEAAAAEoAlBKhYWWXUsFgAAAACAAASpQSyygEFk1DcAsAAAAAEAAALEsqWUJUTSWDQAAsAAIKAQAAAABKJUVFzqgWAWABFAICwAAAEqUAJSUZ6QAAFgAAIpAAAAJSwBLKJYrUsqLALAAACCkBYAAAAEKiws3FhYAWCwCCgIAAAACKIUJYDYgAAFgAAAgAFgAAAAJU3FQCxYsLAssAAAQAEpKCUASgZ3bBKgAsAFiwRQACAAAEKCUlNRbEWAWAAAAAgAAASgBKATcoEsAAAAAABAFgAAEoShdGbFELFiwAAAAIAAAAlAAE2ENZsFlixZYBYABAFgFgAAAJQ0EoEqAFgsAAAAQBKAAAIpNkKJYLLLACwAABFCAAJRKJUsso1KWWCyUQWAARQAAEAAAAEpK1KiyrAlRYALEKAAAIAAAAAKNQJYspBZYWAALABAALAALAlI2mpKlRUqLKguaAAEKRQsuQABNQlihNlgEs1JrJUsCwAAAAEWCwAsAANVJbnUBKSywFgsCwFhYAAhYAAAE2JZYsKQWAWWAsAWABZApAAASg0CKlSy2ASxZY0yFgAARQJYAAJQW2BYRUWWLA1mwAALAgogWAABKA0lsCWKlIsssqLFQFlgAABAABTNSm5UBc1KARYssqCoLFgACFBAAAsPRvzVmpVhc25KLI1CNSAsLAAigBAAlCr6ejxCywubKEssVBUAAAABclAEAB09VPFLLSFzQsilzYqLAsAAFgAACCwNevQ8VlhYssLFkoLmggFgALABYEsAA317U8csWKiwWJVguSwACwAAAABAB07dK8aXNLFSahLWVsQtiCxWWoAsEoAACAO3Xp0+egLFkqKAEVFSoAAQoigARUAL26ej51liwBc0uassJqIogAAAACwAIsGt74iwAAmiBFFkBYCxYAKgAAILDWoIolhKsAlKkNZspLAWLAAABBQgGqBCpUlCWwFktyFSxZUAAAAIpFCDYIpCwLCyULEqAVBYFgsBYASxRANgEE0lSys1YBLFRZYACwAACwEANpQQFhZWapBYubc1LLABYAAABLAK1KlQsqFzQE1JqLJQlEWLAFgAAAQoNAAlEsWAubYJZSLAqWAsAWCxYsACzUppkIWFi5VKlWAslEKIVKgAhqAAA0NmZLFQqFzUoASglSksAsKgAhYLAXTVWMwRc1ZZYqWASosWWWWWBYBYABYEpDerYGAEqTUFlJLc2xKIsKJYsLBYKhYAA6VYsZgBAqWWLLJVgRSUEAAsAAADqayLMyVKELLFk1FSxNSLFSpQgLAsAXKiFXoLBZmASpYWWJpALlQFypAqAACwEF7IsLEyACUgUlgEpZUEqVCoAAAQO8sFhIgCFJNElSrJQsSgEsAAABLCu1zZYqSQCUzqAFQWAsRRKiiWAAAAOoW7OUZASyksAKkqwS2XOpYSxZqQWACwhTqsrrpnlmXKUAEpKhYSqiwlASyywsLAAA3qprrThkZAlEssFQmkSgLASpZZrIsssFgA1st3q54RZAhUpLAWLAsCwXNJUqUSoALANNDdvKWQAAEqWCoS2AsCVKgAAFgE2alCIlAAihAqVEqVNIWBKlJYQoADQ0lMgJQlACALLAJZQqItyqWWALAWi1EAAiiKCFZti51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') no-repeat;
      background-size: cover;
    }
    .audio-list{
      padding: 0.15rem;
    }
    </style>
  复制代码
  

• 音频组件

  <script>
    export default {
      props: {
        length: { // audio length
          type: Number,
          required: true
        },
        totalLength: { // total length
          type: Number,
          default: 15
        },
        audioUrl: { // src
          type: String,
          default: ''
        },
        stopIconPlay: { // stop fn
          type: Function,
          default: () => {}
        },
        isCtrlIcon: { // ctrl down play
          type: Number,
          default: 0
        },
        index: { // audio index
          type: Number,
          default: 0
        }
      },
      watch: {
        isCtrlIcon (val, old) { // clear before state and set ing state
          if (val === this.index) {
            this.isPlay = true
          } else {
            this.isPlay = false
          }
        }
      },
      data () {
        return {
          isPlay: false // ctrl icon state
        }
      },
      methods: {
        playAudio () {
          // play
          this.stopAllAudio()
          if (this.$refs.vmVideo.paused) {
            this.isPlay = true
            this.stopIconPlay && this.stopIconPlay(this.index)
            this.$refs.vmVideo.play()
            this.$refs.vmVideo.addEventListener('ended', () => {
              this.isPlay = false
            }, false)
          } else {
            this.isPlay = false
            this.$refs.vmVideo.pause()
          }
        },
        stopAllAudio (e) {
          // clear all state & stop
          const audioAll = document.getElementsByTagName('audio')
          for (let i = 0; i < audioAll.length; i++) {
            audioAll[i].pause()
            audioAll[i].currentTime = 0
          }
        }
      },
      render: function (createElement) {
        return createElement(
          'div',
          {
            'class': {
              'audio-wrap': true
            },
            'attrs': {
              style: `width: ${1.5 + (this.length / this.totalLength).toFixed(2) * 2}rem`
            },
            on: {
              click: this.playAudio
            }
          },
          [
            createElement('div',
              {
                'class': {
                  'triangle': true
                }
              },
            ),
            createElement('p',
              {
                'class': {
                  'audio-icon': true,
                  'play-icon': this.isPlay,
                  'close-icon': !this.isPlay
                }
              },
            ),
            createElement('p',
              {
                'class': {
                  'time-tag': true
                }
              },
              [this.length, '”']
            ),
            createElement('audio',
              {
                attrs: {
                  src: this.audioUrl
                },
                ref: 'vmVideo'
              },
            )
          ]
        )
      }
    }
    </script>
    <style scoped lang="css">
    .audio-wrap{
      height: 0.6rem;
      min-width: 0.5rem;
      background: #d03b32;
      border-radius: 0.1rem;
      display: flex;
      align-items: center;
      box-shadow: 0.05rem 0.1rem 0.5rem #eaa98e;
      position: relative;
    }
    .triangle{
      background: #d03b32;
      width: 0.15rem;
      height: 0.15rem;
      border-radius: 0.05rem;
      transform: translateX(-0.07rem) rotate(45deg);
    }
    .audio-icon{
      width: 0.19rem;
      height: 0.31rem;
    }
    .play-icon{
      background: url('data:image/gif;base64,R0lGODlhEwAfAIABAP+vqgAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzMwNEQ4NzkxMkVCMTFFOUEzNkVEMURERENDNTA5NTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzMwNEQ4N0ExMkVCMTFFOUEzNkVEMURERENDNTA5NTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMzA0RDg3NzEyRUIxMUU5QTM2RUQxREREQ0M1MDk1NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMzA0RDg3ODEyRUIxMUU5QTM2RUQxREREQ0M1MDk1NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAUyAAEALAAAAAATAB8AAAIjjI+py+0Po5y02gsyzVpysHWeGH0TF4Ij+ZjrBcfyTNe2XQAAIfkEBTIAAQAsBgAFAAYAFQAAAheEgwYYuq2YS5E+ePCb2u7KgeIRjlIWFAAh+QQFZAABACwLAAAACAAfAAACJgwQmXdq7F5TbC5IcbYSbf85lah1JDeG6oWWKXuCJiu/FWi75RMVADs=') no-repeat;
      background-size: cover;
    }
    .close-icon{
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAfCAYAAAAFkva3AAACQklEQVRIiZ2VTUhUURTHf12HitSMrE1C0QdNNJDSh0aLSqhNkS2qXVnbNkIREUgNI9VGihYt3FZCC8FoVZu+NoJa2lAvmIX0BUGRpYwFQWaL653+c2Cevs7q/zvnvP+77737zl0w03eXBHEe6AI+AweAKBcVSkWXwMgBV4BFwGqgF0jZhvnGH2BMuAk4879mAKcNd2Yz6RXzMVsKbAcWSu4JcEu4Djg7l9kG/CMNAwPG8CLwS1ebzaRr4szagLD8bUCH1D4Cd4SXAcfizJ4avgDUCN809eNxZiNAv3A90C6cB14J78lm0nUO/z7a8I+j0WW43fB90VVAqwMezBaeh+XK3fPCLcBK4UfGvNkBuyVxzjT0G24W/QKYEW50+M9fSgBrhAeMWYvoIv7LhljvgHvmgh2iR01trWE1W+WA16Zhnehx/D8ZYrnp/Sq61pkEwBLDRdHVxITj304P8dNwregfc5ltMrl3ousp39jfTK8upOiAw6ZhUHSTqb013CD6kwN2SSIPvBfeaS4eEl2Nn7ghxhx+RoXoNhcfjTFrpPwV5FPAQWA//pAYkeIWyh9zEPgivM/caDgF/Mb/nzYuGb5t+JDoaeBxpRG0FTgiPG7MNuNHeohnuagwWclsr+FuYEq4w9R7ofJwfAh8n9WjwA2pNQAnhSeAPjCHqMQb/D+6Eb9d9AC5DCwW7slFhak4s3DHIZNrBU4JTwLXAiQ9hHsMX81FhdKgSGJWRfl4eglc14YkZtNAJ/79fQBO4PdoKf4CmnB0YYzWe5UAAAAASUVORK5CYII=') no-repeat;
      background-size: cover;
    }
    .time-tag{
      font-size: 0.28rem;
      color: #ffafaa;
      position: absolute;
      right: 0.1rem;
      top: 0;
      line-height: 0.6rem;
    }
    </style>
  复制代码
  

结语：

本文主要为了与上篇录制音频形成一个小的闭环，简要梳理从录制到播放的逻辑实现及各类优化；不当之处欢迎指正交流，感谢支持~