页面音乐（年报）

最新推荐文章于 2024-05-22 16:28:54 发布

Xdoud住在翻斗花园

最新推荐文章于 2024-05-22 16:28:54 发布

阅读量242

点赞数

文章标签： vue.js elementui webview

本文链接：https://blog.youkuaiyun.com/weixin_44130964/article/details/122405120

版权

本文介绍了一个简单的音乐播放组件实现方法，该组件使用HTML5的audio标签来播放音乐，并通过JavaScript控制播放状态。当点击播放图标时，可以切换音乐的播放与暂停状态，并且图标样式也会随之变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="music" ref="musicIcon" @click="playMusic()">
    <audio  id="audio" loop src="../assets/vedio/finding.mp3"></audio>
</div>

  playMusic() {
      var music = document.getElementById("audio");
      if (music.paused) {
        music.play();
        this.$refs.musicIcon.className = 'musicplay music'
      } else {
        music.pause();
        this.$refs.musicIcon.className = 'music'
      }
    },