微信小程序innerAudioContext设置autoplay为true后，切换src时播放器状态的变化

最新推荐文章于 2025-05-27 11:58:44 发布
原创 最新推荐文章于 2025-05-27 11:58:44 发布 · 5.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #innerAudioContext

微信小程序innerAudioContext设置autoplay为true后，切换src时播放器状态的变化

innerAudioContext是微信小程序自带的页面内播放器，可以通过 wx.createInnerAudioContext 接口获取实例。innerAudioContext 的用法如下：
首先获取播放器实例

const innerAudioContext = wx.createInnerAudioContext()

播放音乐需要设置innerAudioContext的src

innerAudioContext.src = XXXXX.mp3

不同于BackgroundAudioManager设置了src后播放器会自动播放，innerAudioContext在设置了音乐的src后，需要手动控制播放。
可以调用play()方法来播放音乐


                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
微信小程序 - 音频播放进度条和点击拖动的控制，支持自定义音乐播放控件样式布局（wx.createAudioContext）解决各种 InnerAudioContext.onTimeUpdate不执行

				
			

			

				

					🏆 前端领域优质创作者
				

				

					08-19
					
					3816
					
				

			

		

		

			
				
微信小程序，vue2，vue3，播放音频怎么显示出进度条，音乐播放器组件，wx.createAudioContext配合slider显示播放进度条，怎么写进度条？onTimeUpdate怎么做音乐进度条，完美解决微信小程序InnerAudioContext.onTimeUpdate失效问题，不执行，seek()方法执行后不走，audio组件显示出播放控件，初始播放不走不触发onTimeUpdate函数，音频播放进度条问题，自定义音乐进度条，报错，切换播放/拖动进度条播放，audio标签的播放、暂停、重播、进

			
		

	



                

            
              



	

		

			

				
					
微信小程序 - 超详音乐列表点击播放 mp3 wav 音乐文件，支持音频暂停播放 / 图标切换 / 流畅切换音频（暂停音乐后，会保留音乐 “进度“ 再次点击时继续播放）解决pause()暂停问题

				
			

			

				

					🏆 前端领域优质创作者
				

				

					10-22
					
					5110
					
				

			

		

		

			
				
微信小程序实现列表点击播放音频，微信小程序实现音乐列表:播放、进度把控，微信小程序Audio列表音乐单独播放，音乐播放器，wx.createInnerAudioContext音频如何中断播放，微信小程序如何实现一个音乐列表，微信小程序怎么实现一个音乐播放列表，微信小程序如何播放mp3音频，微信小程序点击暂停音乐及保留进度，小程序音频列表切换音频，完美解决微信小程序音频innerAudioContext.pause()无法暂停，微信小程序wx.createInnerAudioContext()在安卓手机不能播

			
		

	



              


  
              

                


	

		

			

				
					
小程序[InnerAudioContext]不报错、 不播放BUG要如何解决？

				
			

			

				

					weixin_34396902的博客
				

				

					04-28
					
					3837
					
				

			

		

		

			
				
问题环境
全局生成了一个innerAudioContext实例，每次赋值src然后play()
问题描述
有时候音频播放无声音
解决思路
排错
注册监听方法，查看哪里出错
innerAudioContext.onCanplay(() => {
  console.log('can play')
})
innerAudioContext.onPlay(() => {
  console....

			
		

	





	

		

			

				
					
能让土豆能自动播放的代码  ---  &autoPlay=true

				
			

			

				

					yiya1989的专栏
				

				

					01-17
					
					4369
					
				

			

		

		

			
				
一般土豆网上的音乐或视频的播放器是不能自动播放的。然而，你如果在swf播放器地址代码里加上这一小段这样的代码 &autoPlay=true 那情况就不一样了，播放器会听话的自动播放了
 ！

    复制的swf播放器地址代码：http://www.tudou.com/programs/view/PvSm7-ePGz0/v.swf

　　然后您把这个自动播放的代码 &autoPlay=t

			
		

	



		

			
		



	

		

			

				
					
html5视频播放器和微信小程序如何实现视频的自动播放功能

					
最新发布

				
			

			

				

					阿酷tony
				

				

					05-27
					
					1168
					
				

			

		

		

			
				
在HTML5中实现视频自动播放需设置autoplay和muted属性（浏览器策略要求静音才能自动播放），并可添加loop循环播放、playsinline同层播放等优化属性。微信小程序通过video组件的autoplay属性实现自动播放，同时支持全屏按钮、弹幕功能、循环播放等丰富配置，但需注意浏览器交互限制可能影响自动播放效果。两者都提供了完善的事件监听机制来响应播放状态变化。

			
		

	





	

		

			

				
					
=&isAutoPlay=true&

				
			

			

				

					weixin_30832143的博客
				

				

					02-02
					
					244
					
				

			

		

		

			
				
优酷:插入"自动播放"
=&isAutoPlay=true&
自动播放歌词代码:
<marquee style="width: 383px" scrollamount="3" scrolldelay="180" direction="up" width="383" height="700">
  <p align=...

			
		

	





	

		

			

				
					
innerAudioContext的使用

					
热门推荐

				
			

			

				

					李晨毅的博客
				

				

					09-21
					
					3万+
					
				

			

		

		

			
				
因为官方文档中innerAudioContext直接复制使用可能会有问题，这里应该将const innerAudioContext = wx.createInnerAudioContext()放到Page外面。其他放到onLoad函数中。
&lt;!-- audio.wxml --&gt;
&lt;audio  src="{{src}}" id="myAudio" &gt;&lt;/audio&g...

			
		

	





	

		

			

				
					
小程序innerAudioContext的使用

				
			

			

				

					weixin_54362381的博客
				

				

					04-12
					
					2075
					
				

			

		

		

			
				
实现播放音频很简单,直接上代码啦:
this.innerAudioContext = wx.createInnerAudioContext();

var voicePath = this.data.voiceTempFilePath;

this.innerAudioContext.src = voicePath;  

this.innerAudioContext.play();

this.innerAudioContext.onEnded((res) => {

 console.log('播

			
		

	





	

		

			

				
					
微信小程序音频在自定义组件中实现播放功能

				
			

			

				

					呆萌小菜鸟的博客
				

				

					04-18
					
					1402
					
				

			

		

		

			
				
微信小程序自定义组件中实现音频播放功能

			
		

	





	

		

			

				
					
微信小程序innerAudioContext本地音频播放

				
			

			

				

					DayDayUp
				

				

					02-27
					
					6756
					
				

			

		

		

			
				
微信小程序innerAudioContext本地音频播放文件路径不支持相对路径

innerAudioContext.src='../images/test.mp3'

应该使用绝对路径

innerAudioContext.src='pages/images/test.mp3'
...

			
		

	





	

		

			

				
					
小程序API使用问题之InnerAudioContext

				
			

			

				

					Frankeen的博客
				

				

					01-30
					
					2078
					
				

			

		

		

			
				
1，音频InnerAudioContext设置src问题，多次为src设置不一样的值，进行播放，当src设置为空，播放的时候就会延用之前设置的src播放，处理方法是为空的src设置一个播放地址，不能给src设置为空。如：
let ctx = wx.createInnerAudioContext;
#先设置一个正常播放地址然后进行播放https://www.jianshu.com/writer#/n...

			
		

	





	

		

			

				
					
video更改src，src已进行更改，但未加载新的视频

				
			

			

				

					m0_50953782的博客
				

				

					09-16
					
					1045
					
				

			

		

		

			
				
在video中如是更改source中的src,src进行了变更，但依旧播放原视频如下图所示。src更改成功，视频也变更为了新的视频。src更改成功，但视频依旧是原视频。

			
		

	





	

		

			

				
					
uniapp使用uni.createInnerAudioContext()播放指定音频并且切换

				
			

			

				

					m0_74079648的博客
				

				

					11-03
					
					5208
					
				

			

		

		

			
				
在unipp中我们直接只用代替audio，使用更加方便，更加简洁，uniapp内部创建并返回内部 audio 上下文对象。

			
		

	





	

		

			

				
					
微信小程序：使用InnerAudioContext做一个简单的音频播放器

				
			

			

				

					immocha的博客
				

				

					01-31
					
					5097
					
				

			

		

		

			
				
官方已经不再维护audio 组件，推荐使用InnerAudioContext
API 参考：https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html



			
		

	





	

		

			

				
					
ios真机执行innerAudioContext.play()无声音

				
			

			

				

					magic-zhu
				

				

					04-25
					
					1192
					
				

			

		

		

			
				
解决方案
在需要用的页面onLoad中添加下面的代码
wx.setInnerAudioOption({
    mixWithOther: true,
    obeyMuteSwitch: false,
});




			
		

	





	

		

			

				
					
uni-app：音频API之uni.createInnerAudioContext()

				
			

			

				

					XiaoHuiwei的博客
				

				

					12-27
					
					2240
					
				

			

		

		

			
				
创建并返回内部 audio 上下文 innerAudioContext 对象。简单实现音频播放，音频图片的旋转与暂停。

			
		

	





	

		

			

				
					
微信小程序—InnerAudioContext实现一个音乐播放器

				
			

			

				

					WeiHan_Seven的博客
				

				

					03-02
					
					3375
					
				

			

		

		

			
				
直接上效果：

体验：
自定义系列>>音乐播放器

功能描述：
1、可播放、暂停内置的一条音乐
2、可控制播放进度
3、音乐封面在播放过程中实现旋转动画
4、背景图片表现为音乐封面的高斯模糊
5、离开页面音乐停止播放
完整代码：
js
const app = getApp()
const innerAudioContext = wx.createInnerAudioContext();...

			
		

	





	

		

			

				
					
监听音频标签状态,播放和暂停

				
			

			

				

					qq_42975676的博客
				

				

					06-21
					
					973
					
				

			

		

		

			
				
watchMusicState(){
        let _this = this;
        let $audio = document.getElementsByTagName('audio')[0];//获取音乐DOM节点
        let playOrPause = document.getElementsByClassName('playOrPause')[0];
        // console.log($audio);
        $audio.addEventList

			
		

	





	

		

			

				
					
InnerAudioContext实现音乐播放器

				
			

			

				

					richest_qi的博客
				

				

					06-16
					
					2276
					
				

			

		

		

			
				
音乐播放器的功能是通过调用微信小程序的wx.createInnerAudioContext()接口获取对象ctx，然后利用ctx对象的属性和方法来实现音乐控制。
本例会涉及到ctx对象的如下属性、方法，更多可以访问这里。

src，音频资源的地址。
值得注意的是，src目前仅支持根路径，不支持相对路径。如果使用相对路径，会导致音频无法播放，同类问题可参见这里。这也是为什么本例会基于express搭建一个小型服务器。
volume，音量，范围0~1，默认是1。
duration，当前音频的长度，单位是秒。
c

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值