Vue中使用audio

首先在main.js中导入audio

import audio from "../static/pd-5b768de9060ff779.mp3";
Vue.prototype.clickButton = () => {
    let buttonAudio = document.getElementById('buttonAudio');
    buttonAudio.setAttribute('src', audio);
    buttonAudio.setAttribute('loop','loop');
    //重复播放
    buttonAudio.play();
    //开始播放
}
document.body.addEventListener('click', function(e) {
    let event = e || window.event;
    let target = event.target || event.srcElement;
    let clickMusic = target.getAttribute('clickMusic')
    if (clickMusic === 'true') Vue.prototype.clickButton()
    else return false;
})

在组件中直接使用

    <button @click="play()">播放音乐</button> 
    <audio src="" id="buttonAudio"></audio>
  // 播放音乐
        play() {
          this.clickButton();
          console.log('我发生了点击事件')
        },

点击触发play方法,触发全局方法 clickButton();

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 29,144评论 1 45
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,818评论 1 32
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,292评论 1 12
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,414评论 1 22
  • 爱情是一种香气,明明晃晃,飘飘荡荡,来自灵魂的气味,它能让你在众人中嗅到对于爱情的答案,彼此的香气在你们的故事还没...
    Sanko3阅读 352评论 0 2

友情链接更多精彩内容