vue+h5移动端音乐自动播放

最新推荐文章于 2024-08-22 16:29:37 发布

GG·bond

最新推荐文章于 2024-08-22 16:29:37 发布

阅读量2k

点赞数

分类专栏：前端常用方法文章标签： vue.js javascript 音乐自动播放

本文链接：https://blog.csdn.net/GTbond/article/details/125096905

版权

本文介绍了如何在Vue.js构建的H5移动端应用中，针对微信浏览器实现音乐自动播放的功能。由于谷歌浏览器的安全策略限制，音乐无法自动播放，但微信浏览器提供了特殊的方式实现假自动播放。

摘要由CSDN通过智能技术生成

音乐自动播放

注意：项目是用在微信浏览器上，谷歌不能自动播放，一用就报错，但是微信有可以假自动播放

<template>
  <div class="music" :class="playStatus?'play':''" @click="play()">
    <audio autoplay="autopaly" loop="loop" id="audios">
      <source :src="info.music.image" type="audio/mp3" />
    </audio>
  </div>
</template>

mounted(){
  if(this.isWeixin){
    this.audioAutoPlay('audios')
  }
},

methods:{
      //播放与暂停
      play(){
        if(this.isWeixin){
          this.playStatus?document.getElementById('audios').pause():document.getElementById('audios').play()
              mounted(){
      if(this.isWeixin){
        this.audioAutoPlay('audios')
      }
    },
    methods:{
      //播放与暂停
      play(){
        if(this.isWeixin){
          this.pla