JPlayer使用之二，主要函式介紹

橙子瓣發表於2014-09-19
函式

　　上一篇外掛搭建的順序最後一步的頁面初始化函式中，就是最重要的一步，就先從這個函式說起吧。

$("#jquery_jplayer_1").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        title: "Bubble",
                        mp3: "@Scripts.Url("~/content/test.mp3")"
                        //mp3:"D:\Documents\Music\test.mp3"
                    });
                },
                swfPath: "/Scripts/JPlayer",
                supplied: "mp3"
            });

第一行程式碼$("#jquery_jplayer_1").jPlayer()這個方法，將jquery_jplayer_1這個div初始化成播放器，然後括號裡的ready、swfPath、Supplied都是這個播放器的引數，即Json格式的options，一個個來解釋

swfPath：當瀏覽器不支援Html5時，使用Flash來顯示播放器，這個引數就是指的原始檔中jplayer.swf的路徑，也可以這樣寫：swfPath:"/Scripts/Jplayer/jplayer.swf"

supplied:當前播放器支援的格式

最後，當這些引數設定好了以後，就該呼叫ready函式了，裡面的$(this)還是指剛剛那個播放器，$(this).jPlayer("setMedia")設定要播放的檔案,方法裡面的同樣是json格式的引數，如title：標題，MP3:"檔案路徑"。

然後我的專案裡需要用到動態來播放，也就是點選不同按鈕播放不同的檔案，可以像下面這麼使用：

比如一個button按鈕的click事件中可以加入下列程式碼：

$("#jquery_jplayer_1")
       .jPlayer("stop")
       .jPlayer("setMedia",     {wav:"@Url.Action("GetRecordAudio")/?path='sdf'" })
                               
        .jPlayer("play");

檔案的url我做了一下處理，因為要訪問專案外其他的檔案，所以在後臺action中返回了一個FileStreamResult的型別，順便貼出來：

//返回伺服器檔案
        public FileStreamResult GetRecordAudio(string path)
        {
            FileStream file = new FileStream(@"D:\Documents\Music\test.wav",FileMode.Open);
            return File(file, "application/octet-stream");
        }

path可以自己處理，這樣我就完成了一個動態播放音樂的功能。

 

附上jplayer官方API地址：http://www.jplayer.org/latest/developer-guide/

 

在網上看到有朋友說播放器無法隱藏，在官網上找到了解決辦法（好像使用html5的時候才支援隱藏）：

    <head>
    <style>
    #jquery_jplayer {
    display:none; /* 當使用flash顯示的時候無效 */
    }
    </style>
    <script type="text/javascript">
    $("#jquery_jplayer").hide(); /*當使用flash顯示的時候無效 */
    </script>
    </head>
     
    <body>
    <div id="jquery_jplayer"></div>
    </body>

 

相關文章