关于在vue中动态修改audio的src的问题

最新推荐文章于 2023-09-11 11:11:30 发布
最新推荐文章于 2023-09-11 11:11:30 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： 笔记 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38483107/article/details/125063348
版权

项目场景：

在vue2中给audio直接修改值

问题描述

在vue2中给audio直接修改src的时候会加载失败

 

 

 

 如果使用require修改src就不会报错
 

 

 
 

 
 

原因分析：
 

 
 
这是因为vue打包后的mp3的名称是会变化的，vue会给mp3文件后面加上一串字符
 

 

 

 

很名校用require引入多了后缀
 

再看看不修改src的audio的src是什么样的
 

 
 

也是有后缀的  和require一样 ，这就是为什么直接修改src会报错 ，浏览器根本找不到对应的地址
 

解决方案：
 

 
 
目前只知道用require  有大佬知道更好的办法欢迎留言
 

 


                

        

    

  



    



                



	

		

			

				
					
如何动态改变audio的播放的src

				
			

			

				

					weixin_33924220的博客
				

				

					08-29
					
					9232
					
				

			

		

		

			
				
如何动态改变audio的播放的src
一、总结
一句话总结：js方式在请求外部网站的时候行，php方式在请求内外部资源都行。因为php走在js前面，所以问题可以从php方面想办法。
 
1、如何使用js控制修改audio的src或它的source 的src属性实现动态改变audio放的音频？
a、只有修改audio 的src值，才可以播放修改source 的 src值却不可以播放
b、...

			
		

	



                

            
              



	

		

			

				
					
vue3 + vite自定义封装vue+audio ，并发布到npm

				
			

			

				

					l976689的博客
				

				

					03-29
					
					2090
					
				

			

		

		

			
				
vue3编写的自定义audio小工具，发布npm使用全过程讲解和遇到的坑

			
		

	



              


  
              

                


	

		

			

				
					
vue动态修改vedio/audio的src

				
			

			

				

					wuyanhong529的博客
				

				

					11-01
					
					1805
					
				

			

		

		

			
				
vue动态修改vedio/audio的src

绑定一个ref值

<div @click="play()"></div>
<center>
	<audio ref="audio" controls :src="src"></audio>
</center>


在需要动态修改的方法里获取ref动态设置src

this.$refs.audio.src = src（动态设置的src地址）


...

			
		

	





	

		

			

				
					
html audio 更改src,HTML audio src 属性 | 菜鸟教程

				
			

			

				

					weixin_31463457的博客
				

				

					06-11
					
					524
					
				

			

		

		

			
				
HTML  src 属性实例播放音频:您的浏览器不支持 audio 元素。尝试一下 »浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 浏览器都支持 src 属性。。但是不是有的浏览器都支持音频的文件格式。注意： Internet Explorer 8 及更早 IE 版本不支持  标签。定义和用法src 属性描述了音频文件的地址...

			
		

	



		

			
		



	

		

			

				
					
html audio 更改src,HTML audio src 属性

				
			

			

				

					weixin_32950005的博客
				

				

					06-11
					
					835
					
				

			

		

		

			
				
HTML  src 属性实例播放音频:您的浏览器不支持 audio 元素。尝试一下 »浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 浏览器都支持 src 属性。。但是不是有的浏览器都支持音频的文件格式。注意： Internet Explorer 8 及更早 IE 版本不支持  标签。定义和用法src 属性描述了音频文件的地址...

			
		

	





	

		

			

				
					
html audio 更改src,html - change <audio> src with javascript - Stack Overflow

				
			

			

				

					weixin_33418394的博客
				

				

					06-11
					
					171
					
				

			

		

		

			
				
I have multiple audio files that I want to stream based on the user selects. How do I do that? This is what I have so far and it doesn't seem to work.*UPDATE: Made a few changes and now its claiming t...

			
		

	





	

		

			

				
					
audio 播放器 在vue-audio-better上增加图标名称和大小

				
			

			

				

					04-27
				

			

		

		

			
				
在这个项目中，`vue-audio-better`的源码可能位于这里，我们可以查看源码以了解如何修改它以支持图标名称和大小的定制。  `public`目录可能包含静态资源，如图片、字体和额外的HTML文件，它在非工程化项目中用于存放...

			
		

	





	

		

			

				
					
Vue 自定义标签的src属性不能使用相对路径的解决

				
			

			

				

					10-16
				

			

		

		

			
				
一旦配置正确，你将能够在Vue项目中自由地使用require()或其他方法来动态加载静态资源，而无需担心相对路径的问题。  希望本文所述的内容能够帮助到遇到类似问题的Vue.js开发者，正确配置项目以解决自定义标签的src...

			
		

	





	

		

			

				
					
vueAudiocustomStylepalyer一个audio标签自定义样式的vue组件

				
			

			

				

					08-10
				

			

		

		

			
				
2. **模板结构**：在组件的模板中，将 `<audio>` 标签作为主要元素，并通过 Vue 的指令（如 `v-bind`、`v-on`）绑定数据和事件处理函数。  3. **样式定制**：通过 CSS（可能包含 SCSS 或 Less 等预处理器）来实现...

			
		

	





	

		

			

				
					
vue3 修改audio音量

					
最新发布

				
			

			

				

					01-20
				

			

		

		

			
				
在 Vue3 应用程序中调整 `<audio>` 元素的音量可以通过绑定 `volume` 属性来实现。下面是一个完整的例子展示如何创建一个简单的音频播放器并允许用户更改其音量。  #### 创建音频播放组件  定义一个新的组件用于管理...

			
		

	





	

		

			

				
					
【vue】audio/video标签动态绑定src改变后不刷新

				
			

			

				

					xms_can_fly的博客
				

				

					06-09
					
					1169
					
				

			

		

		

			
				
audio/video标签动态修改src

			
		

	





	

		

			

				
					
vue的audio动态绑定src无效

				
			

			

				

					changyana的博客
				

				

					02-17
					
					971
					
				

			

		

		

			
				
用this.audio_src = './alarm.mp3’是不行的，无法播放。

			
		

	





	

		

			

				
					
Vue动态设置audio/video的src不能播放的问题

				
			

			

				

					@梢的博客
				

				

					09-17
					
					7155
					
				

			

		

		

			
				
Vue动态设置audio/video的src不能播放的问题
	<audio
	      ref="myAudio"
	      :src="playSrc"
	>
      您的浏览器不支持音频播放
    </audio>

这里默认列表第一个音频
data () {
    return {
           playSrc: this.audioList[0],
    }
  },

当我动态去更改src的后要调用load() 方法重新加载一下（myAudio是我自

			
		

	





	

		

			

				
					
Vue实现动态src实现播放音频(audio标签)本地

				
			

			

				

					error044的博客
				

				

					06-08
					
					3447
					
				

			

		

		

			
				
技术场景：Vue2,iview需求场景：公司项目要实现一个扫码枪录入条码，并在录入条码后动态播放一段音频。

			
		

	





	

		

			

				
					
vue 中 video标签数据（src）改变，页面不刷新

				
			

			

				

					weixin_48643202的博客
				

				

					09-11
					
					867
					
				

			

		

		

			
				
【代码】vue 中 video标签数据（src）改变，页面不刷新。

			
		

	





	

		

			

				
					
vue动态设置audio的src无效

				
			

			

				

					明日复明日的博客
				

				

					04-20
					
					4205
					
				

			

		

		

			
				
下面src是一样的，但是如果动态设置就无效。


<template>
    <div class="player">
        <div id="trigger" >
<!--            <audio :src="src"  id="audio" loop ></audio>-->
           ...

			
		

	





	

		

			

				
					
动态改变video(或audio)标签的子级标签,source中的src属性，不起作用问题

				
			

			

				

					m0_55557411的博客
				

				

					01-08
					
					1828
					
				

			

		

		

			
				
动态改变video(或audio)标签的子级标签,source中的src属性，不起作用问题

			
		

	





	

		

			

				
					
在VUE中播放音频（audio介绍与使用）

					
热门推荐

				
			

			

				

					qq_45820271的博客
				

				

					08-25
					
					4万+
					
				

			

		

		

			
				
本文介绍了如何使用audio标签播放音频，并在vue2,vue3以及uniapp中使用

			
		

	





	

		

			

				
					
使用js修改audio的source的src属性连接，自动播放的解决方案

				
			

			

				

					徊忆羽菲
				

				

					10-18
					
					6649
					
				

			

		

		

			
				
使用js修改audio的source的src属性连接，自动播放的解决方案

 <audio controls id="mp3audio" autoplay>

    <source src="" type="audio/mpeg" id="beijingyine">
                                        您的浏览器不支持 audi...

			
		

	





	

		

			

				
					
Vue项目中audio播放器图标的定制与全局绑定

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"在Vue项目中使用vue-audio-better组件库添加图标名称和大小的功能。由于这是一个非工程化的项目，你需要全局注册vue.js，并且需要了解如何在没有webpack的情况下使用ES6模块。"  在Vue.js框架中，"vue...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值