如何动态改变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

转载于:https://www.cnblogs.com/Renyi-Fan/p/9555996.html