如何动态改变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句时，就会遇到

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

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

这是因为这样做的话资源不是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

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