Vue uses the table component of elementui to play audio on every line, and after turning the page, the audio of the corresponding line on the previous page is played.

use the table component of elementui to play audio. After turning the page, the content is played for the first time

.

the source code is as follows: 

<template>
  <div >
    <head-top></head-top>
    <div class="table_container">
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%" :cell-style="cell">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          property="title"
          label=""
          width="150">
        </el-table-column>
        <el-table-column
          property="author"
          label=""
          width="80">
        </el-table-column>
        <el-table-column
          property="dynasty"
          label=""
          width="80">
        </el-table-column>
        <el-table-column
          property="scores"
          label=""
          width="80">
        </el-table-column>
        <el-table-column
          property="tag"
          label=""
          width="250">
        </el-table-column>
        <el-table-column
          property="operate"
          label="">
          <template slot-scope="scope">
            <router-link :to="{ name: "num", params: { id: scope.row.id }}" target="_blank">
              <el-button size="mini"><i class="el-icon-view"></i></el-button>
            </router-link>
            <el-button
              size="mini"
              type="primary"
              v-show="scope.row.audiourl"
              @click="play(scope.$index, scope.row)"><i class="iconfont icon-play"></i>
              <audio :id="scope.row.audiourl"><source :src="scope.row.audiourl"  type="audio/mpeg" /></audio>
              </el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleRecommend(scope.$index, scope.row)"><i class="el-icon-success"></i></el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from "/components/headTop"
import axios from "axios"
import { Loading } from "element-ui"
export default {
  data () {
    return {
      tableData: [],
      currentPage4: 1,
      limit: 10,
      total: 100,
      icon: "",
      audio: ""
    }
  },
  created () {
    this.getPages()
  },
  components: {
    headTop
  },
  methods: {
    getPages () {
      let loadingInstance = Loading.service({ fullscreen: true, text: "" })
      axios.get("/v1/gushiwen/selectByScores?pageNum=" + this.currentPage4 + "&pageSize=" + this.limit).then((response) => {
        if (response.status === 200) {
          this.tableData = response.data.list
          this.total = response.data.total
          for (let i of this.tableData) {
            if (i.audiourl == null || i.audiourl === "") {
              i.audiourl = false
            } else {
              i.audiourl = "https://img.nichuiniu.cn/mp3/" + i.audiourl
            }
          }
          loadingInstance.close()
        }
      }).catch(function (err) {
        console.error(err)
      })
    },
    handleSizeChange (val) {
      this.limit = val
      this.getPages()
      if (this.audio !== "") {
        this.audio.pause()
        this.icon.className = "iconfont icon-play"
      }
    },
    handleCurrentChange (val) {
      this.currentPage4 = val
      this.getPages()
      if (this.audio !== "") {
        this.audio.pause()
        this.icon.className = "iconfont icon-play"
      }
    },
    cell ({row, column, rowIndex, columnIndex}) {
      return "padding:4px 0"
    },
    play (index, row) {
      // 
      if (this.audio !== "" && this.audio !== document.getElementById(row.audiourl)) {
        this.audio.pause()
        this.icon.className = "iconfont icon-play"
      }
      this.audio = document.getElementById(row.audiourl)
      this.icon = document.getElementById(row.audiourl).previousElementSibling
      if (this.audio.paused) {
        this.audio.play()
        this.icon.className = "iconfont icon-zanting"
      } else {
        this.audio.pause()
        this.icon.className = "iconfont icon-play"
      }
    }
  }
}
</script>

if the audio is not played repeatedly before each execution of the getpage method, the code is as follows: 

<template>
  <div >
    <head-top></head-top>
    <div class="table_container">
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%" :cell-style="cell">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          property="title"
          label=""
          width="150">
        </el-table-column>
        <el-table-column
          property="author"
          label=""
          width="80">
        </el-table-column>
        <el-table-column
          property="dynasty"
          label=""
          width="80">
        </el-table-column>
        <el-table-column
          property="scores"
          label=""
          width="80">
        </el-table-column>
        <el-table-column
          property="tag"
          label=""
          width="250">
        </el-table-column>
        <el-table-column
          property="operate"
          label="">
          <template slot-scope="scope">
            <router-link :to="{ name: "num", params: { id: scope.row.id }}" target="_blank">
              <el-button size="mini"><i class="el-icon-view"></i></el-button>
            </router-link>
            <el-button
              size="mini"
              type="primary"
              v-show="scope.row.audiourl"
              @click="play(scope.$index, scope.row)"><i class="iconfont icon-play"></i>
              <audio :id="scope.row.audiourl"><source :src="scope.row.audiourl"  type="audio/mpeg" /></audio>
              </el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleRecommend(scope.$index, scope.row)"><i class="el-icon-success"></i></el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from "/components/headTop"
import axios from "axios"
import { Loading } from "element-ui"
export default {
  data () {
    return {
      tableData: [],
      currentPage4: 1,
      limit: 10,
      total: 100,
      icon: "",
      audio: ""
    }
  },
  created () {
    this.getPages()
  },
  components: {
    headTop
  },
  methods: {
    getPages () {
      this.tableData = []
      let loadingInstance = Loading.service({ fullscreen: true, text: "" })
      axios.get("/v1/gushiwen/selectByScores?pageNum=" + this.currentPage4 + "&pageSize=" + this.limit).then((response) => {
        if (response.status === 200) {
          this.tableData = response.data.list
          this.total = response.data.total
          for (let i of this.tableData) {
            if (i.audiourl == null || i.audiourl === "") {
              i.audiourl = false
            } else {
              i.audiourl = "https://img.nichuiniu.cn/mp3/" + i.audiourl
            }
          }
          loadingInstance.close()
        }
      }).catch(function (err) {
        console.error(err)
      })
    },
    handleSizeChange (val) {
      this.limit = val
      this.getPages()
      if (this.audio !== "") {
        this.audio.pause()
        this.icon.className = "iconfont icon-play"
      }
    },
    handleCurrentChange (val) {
      this.currentPage4 = val
      this.getPages()
      if (this.audio !== "") {
        this.audio.pause()
        this.icon.className = "iconfont icon-play"
      }
    },
    cell ({row, column, rowIndex, columnIndex}) {
      return "padding:4px 0"
    },
    play (index, row) {
      // 
      if (this.audio !== "" && this.audio !== document.getElementById(row.audiourl)) {
        this.audio.pause()
        this.icon.className = "iconfont icon-play"
      }
      this.audio = document.getElementById(row.audiourl)
      this.icon = document.getElementById(row.audiourl).previousElementSibling
      if (this.audio.paused) {
        this.audio.play()
        this.icon.className = "iconfont icon-zanting"
      } else {
        this.audio.pause()
        this.icon.className = "iconfont icon-play"
      }
    }
  }
}
</script>

the only difference between the above two pieces of code is whether it is set before the request. I don"t know why 

this.tableData = []

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Audio-player element-ui vue.js javascript
May.08,2022

encounters similar problems: the solution is to modify
< source: src= "scope.row.audiourl" type= "audio/mpeg" / > < / audio >
to < / audio >
so that it can be played normally when playing the audio on the second page

when you use the id assigned to audio by audiourl , have you considered that audiourl is empty.
I think the code for your audio playback should be written like this, assigning the index to id, preceded by a letter, so that each audio is a unique

. 
<source :src="scope.row.audiourl"  type="audio/mpeg" /></audio>
</el-button>

when you get the audio, pass in the index index, and directly document.getElementById ('audio'+index) , and play with this audio when playing
. As for the playback after turning the page or the previous page, the src is the same, and you may need to overwrite the src

.

Previous: How to print function name in js

Next: Can the port number on which vue-cli is running be removed?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3949f-2b8fb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3949f-2b8fb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?