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

如何动态改变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插件整体：

 <link rel="stylesheet" href="__STUDENT__/AudioPlayer/AudioPlayer/css/audioplayer.css" />
 <script src="__STUDENT__/AudioPlayer/AudioPlayer/js/audioplayer.js"></script>
 <script>
     /*
         VIEWPORT BUG FIX
         iOS viewport scaling bug fix, by @mathias, @cheeaun and @jdalton
     */
     (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));
 </script>
 <div id="wrapper">
     <audio preload="auto" id="fry_audio" controls>
         <source src="__STUDENT__/AudioPlayer/AudioPlayer/audio/BlueDucks_FourFlossFiveSix.mp3">
     </audio>
     <script>$( function() { $( 'audio' ).audioPlayer(); } );</script>
 </div>

 <script>
     function addDynamicNameAttr_audio(nameAttrValue) {
         console.log(nameAttrValue);
         $(function () {
             $('#fry_audio').attr('src',nameAttrValue);
             var fry_audio=$('#fry_audio').get('0');
             fry_audio.load();
         });

     }
 </script>

这里 要执行load()函数，不然没效果

外部调用：

 <div width="100%" >
     <!-- 引入音频播放app -->
     {include file="app/audio" /}
     <!--End 引入音频播放app -->
     <script>
         console.log('11111111111');
         // addDynamicNameAttr_audio("{$article.a_content_aud1}");
         addDynamicNameAttr_audio("http://yun.it7090.com/video/XHLaunchAd/video01.mp4");
     </script>
 </div>

现在执行第8行，调用外部资源，这样是成功的

但是当我调用系统内部资源的时候，就是执行上面第7句时，就会遇到

也就是我的系统不允许这样直接请求资源

这是因为这样做的话资源不是php发给我们的，而变成了js请求的资源一样，自然不行。（说的有点牵强，大概就是这个意思）

2、php方式（最开始就动态指定audio的src）

上面的js操作不能解决问题，所以我们就从php出发，因为php运行在js的前面，如果php那个时候解决了audio的src，那么就不用js再来请求资源了，也就不会遇到上面的问题

audio插件整体：

 <?php
     if(!isset($fry_audio_type)) $fry_audio_type=null;
     $fry_audio_src="__STUDENT__/AudioPlayer/AudioPlayer/audio/BlueDucks_FourFlossFiveSix.mp3";
     if($fry_audio_type=="article.a_content_aud1"){
         $fry_audio_src=$article['a_content_aud1'];
     }
 ?>
 <link rel="stylesheet" href="__STUDENT__/AudioPlayer/AudioPlayer/css/audioplayer.css" />
 <script src="__STUDENT__/AudioPlayer/AudioPlayer/js/audioplayer.js"></script>
 <script>
     /*
         VIEWPORT BUG FIX
         iOS viewport scaling bug fix, by @mathias, @cheeaun and @jdalton
     */
     (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));
 </script>
 <div id="wrapper">
     <audio preload="auto" id="fry_audio" controls>
         <source src="{$fry_audio_src}">
     </audio>
     <script>$( function() { $( 'audio' ).audioPlayer(); } );</script>
 </div>

外部调用：

 <!--3、音频部分-->
 {if condition="strlen($article['a_content_aud1'])>0"}
 <div width="100%" >
     <?php $fry_audio_type="article.a_content_aud1";?>
     <!-- 引入音频播放app -->
     {include file="app/audio" /}
     <!--End 引入音频播放app -->
 </div>
 {/if}
 <div width="100%" >
     <?php $fry_audio_type=null;?>
     <!-- 引入音频播放app -->
     {include file="app/audio" /}
     <!--End 引入音频播放app -->
 </div>

上面的代码是两次掉用，这样可以通过不同的调用赋给audio不同的src