由于浏览器限制的原因，不允许自动播放audio音频，尝试网上的方法后也没有进展（如果有解决方法，欢迎评论~）

一、首先创建 audio 标签

<audio class="g-back-music" src="" ref="backMusicRef" loop preload hidden autoplay></audio>

二、因为在页面刷新后需要先执行动画，动画完成后才去播放音乐，所以在执行 mounted 函数时，先加载音乐源

mounted() {
    if(this.sGetCurrentMusicSrc) {
        // 存在背景音乐，加载音乐源
        this.$refs.backMusicRef.src = this.sGetCurrentMusicSrc;
    }
}

三、在动画完成后，进行背景音乐的初始化

        1. 执行 audio 标签的play方法（目前来看安卓自带浏览器是支持自动播放的）

        2. 微信浏览器的处理（如果不加，IOS微信端就不支持自动播放了）

        3. 增加事件监听（PC端 click事件、手机端 touchstart 事件）

        4. 变量说明：bIsMusicPlay（控制音乐是否播放）

// 初始化音乐
fnMusicInit() {
    this.$refs.backMusicRef.play().then(() => {
        this.bIsMusicPlay = true;
    }).catch(()=> {
        this.bIsMusicPlay = false;
    })
    if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
        // 微信浏览器
        WeixinJSBridge.invoke('getNetworkType', {}, ()=> {
            this.$refs.backMusicRef.play().then(()=> {
                this.bIsMusicPlay = true;
            }).catch(()=> {
                this.bIsMusicPlay = false;
            })
        });
    }
    let fnPlay = (event)=> {
        let className = event.target.className;
        if(typeof className === 'object' || typeof className === 'string' && !className.includes('g-music')) {
            // 点击非音乐开关按钮，播放音乐
            this.$refs.backMusicRef.play().then(()=> {
                this.bIsMusicPlay = true;
            }).catch(()=> {
                this.bIsMusicPlay = false;
            })
        }
        let type  = 'ontouchstart' in document.documentElement ? 'touchstart' :　'mousedown';
        // 最后记得移除监听
        document.removeEventListener(type, fnPlay);
    }
    // 监听用户主动操作
    if('ontouchstart' in document.documentElement) {
        document.addEventListener('touchstart', fnPlay)
    } else {
        document.addEventListener('mousedown', fnPlay)
    }    
}

四、音乐的播放，暂停

fnMusicOpera(type) {
    if(type === 'play') {
        // 播放
        this.$refs.backMusicRef.play().then(()=> {
            this.bIsMusicPlay = true;
        }).catch(()=> {
            this.bIsMusicPlay = false;
        }) 
    } else {
        // 暂停
        this.$refs.backMusicRef.pause();
        this.bIsMusicPlay = false;
    }
}

提示

替换音乐源后，需要手动暂停音乐，防止在音乐关闭的情况下自动播放

参考链接：https://www.panyanbin.com/article/2940754d.html

# javascript
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区