原生微信小程序添加背景音乐

最新推荐文章于 2024-02-21 16:07:53 发布

S筱潇S四维Smile

最新推荐文章于 2024-02-21 16:07:53 发布

阅读量8.4k

点赞数 8

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_29483485/article/details/110792438

版权

本文介绍了如何在原生微信小程序中实现背景音乐功能。首先，通过在app.js配置背景音乐；接着，创建music组件，包括music.js、music.wxml、music.wxss和music.json四个部分；最后，在app.json中引入组件，并在各页面wxml中添加组件以实现背景音乐播放。

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

1、app.js创建背景音乐

App({
  globalData:{
        bgm_src: "", //背景音乐地址
	    bgrAudioContext: "",
	    bg_is_play: false, //背景音乐是否播放
  },
  onLaunch: function() { //启动小程序执行方法
        this.createBgm(); //背景音乐
  },
  createBgm(){
    this.globalData.bgrAudioContext = wx.createInnerAudioContext();
  	this.globalData.bgrAudioContext.src = this.globalData.bgm_src;
  	this.globalData.bgrAudioContext.loop = true;
  	this.globalData.bg_is_play = false; //默认暂停
  }
})

2、创建music组件

在components创建文件夹music

（1）music.js

var app = getApp();
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {},

	/**
	 * 组件的初始数据
	 */
	data: {
		is_on: app.globalData.bg_is_play
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		tigger() {
			this.setData({
				is_on: !this.data.is_on
			});
			app.globalData.bg_is_play = this.data.is_on;
			if (!this.data.is_on) {