當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2023/11/29 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了如何动态改变audio的播放的src 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

如何動態(tài)改變audio的播放的src

一、總結(jié)

一句話總結(jié)：js方式在請求外部網(wǎng)站的時候行，php方式在請求內(nèi)外部資源都行。因為php走在js前面，所以問題可以從php方面想辦法。

1、如何使用js控制修改audio的src或它的source 的src屬性實現(xiàn)動態(tài)改變audio放的音頻？

a、只有修改audio?的src值，才可以播放
修改source?的?src值卻不可以播放

b、在更改src后要加上load();函數(shù)（這是js下的函數(shù)，不是jquery的那個load()）

17 <script> 18 function addDynamicNameAttr_audio(nameAttrValue) { 19 console.log(nameAttrValue); 20 $(function () { 21 $('#fry_audio').attr('src',nameAttrValue); 22 var fry_audio=$('#fry_audio').get('0'); 23 fry_audio.load(); 24 }); 25 26 } 27 </script>

這種方法在請求外部網(wǎng)站的時候行

2、php方式實現(xiàn)動態(tài)改變audio的播放的src？

就是請求參數(shù)的不同動態(tài)的決定把哪個路徑的地址賦值給audio的src

請求的時候就是好好設(shè)置這個$fry_audio_type值就行了

二、如何動態(tài)改變audio的播放的src

1、js方式

這是在thinkphp5.0中，我把audio封裝成整體，便于在系統(tǒng)中多次調(diào)用

audio插件整體：

1 <link rel="stylesheet" href="__STUDENT__/AudioPlayer/AudioPlayer/css/audioplayer.css" /> 2 <script src="__STUDENT__/AudioPlayer/AudioPlayer/js/audioplayer.js"></script> 3 <script> 4 /* 5 VIEWPORT BUG FIX 6 iOS viewport scaling bug fix, by @mathias, @cheeaun and @jdalton 7 */ 8 (function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document)); 9 </script> 10 <div id="wrapper"> 11 <audio preload="auto" id="fry_audio" controls> 12 <source src="__STUDENT__/AudioPlayer/AudioPlayer/audio/BlueDucks_FourFlossFiveSix.mp3"> 13 </audio> 14 <script>$( function() { $( 'audio' ).audioPlayer(); } );</script> 15 </div> 16 17 <script> 18 function addDynamicNameAttr_audio(nameAttrValue) { 19 console.log(nameAttrValue); 20 $(function () { 21 $('#fry_audio').attr('src',nameAttrValue); 22 var fry_audio=$('#fry_audio').get('0'); 23 fry_audio.load(); 24 }); 25 26 } 27 </script>

這里要執(zhí)行l(wèi)oad()函數(shù)，不然沒效果

外部調(diào)用：

1 <div width="100%" > 2  3 {include file="app/audio" /} 4  5 <script> 6 console.log('11111111111'); 7 // addDynamicNameAttr_audio("{$article.a_content_aud1}"); 8 addDynamicNameAttr_audio("http://yun.it7090.com/video/XHLaunchAd/video01.mp4"); 9 </script> 10 </div>

現(xiàn)在執(zhí)行第8行，調(diào)用外部資源，這樣是成功的

但是當(dāng)我調(diào)用系統(tǒng)內(nèi)部資源的時候，就是執(zhí)行上面第7句時，就會遇到

也就是我的系統(tǒng)不允許這樣直接請求資源

這是因為這樣做的話資源不是php發(fā)給我們的，而變成了js請求的資源一樣，自然不行。（說的有點牽強，大概就是這個意思）

2、php方式（最開始就動態(tài)指定audio的src）

上面的js操作不能解決問題，所以我們就從php出發(fā)，因為php運行在js的前面，如果php那個時候解決了audio的src，那么就不用js再來請求資源了，也就不會遇到上面的問題

audio插件整體：

1 <?php 2 if(!isset($fry_audio_type)) $fry_audio_type=null; 3 $fry_audio_src="__STUDENT__/AudioPlayer/AudioPlayer/audio/BlueDucks_FourFlossFiveSix.mp3"; 4 if($fry_audio_type=="article.a_content_aud1"){ 5 $fry_audio_src=$article['a_content_aud1']; 6 } 7 ?> 8 <link rel="stylesheet" href="__STUDENT__/AudioPlayer/AudioPlayer/css/audioplayer.css" /> 9 <script src="__STUDENT__/AudioPlayer/AudioPlayer/js/audioplayer.js"></script> 10 <script> 11 /* 12 VIEWPORT BUG FIX 13 iOS viewport scaling bug fix, by @mathias, @cheeaun and @jdalton 14 */ 15 (function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document)); 16 </script> 17 <div id="wrapper"> 18 <audio preload="auto" id="fry_audio" controls> 19 <source src="{$fry_audio_src}"> 20 </audio> 21 <script>$( function() { $( 'audio' ).audioPlayer(); } );</script> 22 </div>

外部調(diào)用：

1  2 {if condition="strlen($article['a_content_aud1'])>0"} 3 <div width="100%" > 4 <?php $fry_audio_type="article.a_content_aud1";?> 5  6 {include file="app/audio" /} 7  8 </div> 9 {/if} 10 <div width="100%" > 11 <?php $fry_audio_type=null;?> 12  13 {include file="app/audio" /} 14  15 </div>

上面的代碼是兩次掉用，這樣可以通過不同的調(diào)用賦給audio不同的src

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9555996.html

總結(jié)

以上是生活随笔為你收集整理的如何动态改变audio的播放的src的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。