列表中的audio，播放其中一个，其他暂停

<el-table border :data="tableData">
    <el-table-column align="center" prop="url"  label="文件地址" min-width="200">
        <template slot-scope="{row,$index}">
            <el-popover placement="right" width="400" trigger="hover">
                <audio :ref="'mp3Audio'+$index" class="mp3Audio"  @canplay="onCanPlay" @play="onPlay($index)" @pause="onPause($index)" @ended="onEnded" style="width:100%;height:30px;margin-top: 10px;" :src="row.url"  controls></audio>
                <span slot="reference">{{row.url}}</span>
            </el-popover>
        </template>
    </el-table-column>
</el-table>

methods: {
          onCanPlay() {
            // console.log('Audio is ready to play.');
          },
          onPlay(index) {
            let audioDom= this.$refs['mp3Audio'+ index]
            audioDom.currentTime = 0;
            audioDom.play();
            const audios = document.getElementsByClassName('mp3Audio');
            [].forEach.call(audios, function (i) {
              if(i !== audioDom) {
                i.pause();
                i.currentTime = 0;
              }
            }) 
          },
          onPause() {
            // console.log('Audio is paused.');
          },
          onEnded() {
            // console.log('Audio has ended.');
          },
}