如何动态改变audio的播放的src
一、总结
一句话总结：js方式在请求外部网站的时候行，php方式在请求内外部资源都行。因为php走在js前面，所以问题可以从php方面想办法。
1、如何使用js控制修改audio的src或它的source 的src属性实现动态改变audio放的音频？
a、只有修改audio 的src值，才可以播放
修改source 的 src值却不可以播放
b、在更改src后要加上load();函数（这是js下的函数，不是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>
这种方法在请求外部网站的时候行
2、php方式实现动态改变audio的播放的src？
就是请求参数的不同动态的决定把哪个路径的地址赋值给audio的src
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 ?>
18 <audio preload="auto" id="fry_audio" controls>
19 <source src="{$fry_audio_src}">
20 </audio>
请求的时候就是好好设置这个$fry_audio_type值就行了
二、如何动态改变audio的播放的src
1、js方式
这是在thinkphp5.0中，我把audio封装成整体，便于在系统中多次调用
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>
这里 要执行load()函数，不然没效果
外部调用：
1 <div width="100%" > 2 <!-- 引入音频播放app --> 3 {include file="app/audio" /} 4 <!--End 引入音频播放app --> 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>
现在执行第8行，调用外部资源，这样是成功的
但是当我调用系统内部资源的时候，就是执行上面第7句时，就会遇到
也就是我的系统不允许这样直接请求资源
这是因为这样做的话资源不是php发给我们的，而变成了js请求的资源一样，自然不行。（说的有点牵强，大概就是这个意思）
2、php方式（最开始就动态指定audio的src）
上面的js操作不能解决问题，所以我们就从php出发，因为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>
外部调用：
1 <!--3、音频部分--> 2 {if condition="strlen($article['a_content_aud1'])>0"} 3 <div width="100%" > 4 <?php $fry_audio_type="article.a_content_aud1";?> 5 <!-- 引入音频播放app --> 6 {include file="app/audio" /} 7 <!--End 引入音频播放app --> 8 </div> 9 {/if} 10 <div width="100%" > 11 <?php $fry_audio_type=null;?> 12 <!-- 引入音频播放app --> 13 {include file="app/audio" /} 14 <!--End 引入音频播放app --> 15 </div>
上面的代码是两次掉用，这样可以通过不同的调用赋给audio不同的src
