vue实现播放与暂停

时间:2024-10-30 07:15:37
  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • <title>Document</title>
  • </head>
  • <body>
  • <div id="app">
  • <audio id="audio" ref="audioDom"
  • src="./20201208234554/99bee69f0fec864efe3d77eb6cd99c33/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/4110448227/a020/49fb/4f7c/88f3907dd4e4d94ba61ee2a207b2608a.mp3"
  • controls="controls" loop="loop" autoplay="autoplay"></audio>
  • <button @click="handleClick">点击关闭</button>
  • <button @click="handleClicks">点击播放</button>
  • </div>
  • </body>
  • <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  • <script src="/npm/vue/dist/"></script>
  • <script>
  • let vm = new Vue({
  • el: "#app",
  • data: {
  • },
  • methods: {
  • handleClick: function () {
  • this.$refs["audioDom"].pause();
  • },
  • handleClicks: function () {
  • this.$refs["audioDom"].play();
  • }
  • }
  • })
  • </script>
  • </html>