如何動態改變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(); 24         });

    }
</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