Phonegap - HTML5 - 带有XML播放列表的音乐播放器

时间:2013-05-19 19:33:37

标签: xml html5 cordova jplayer

好的,所以我一直在研究一个带有phonegap的jquery移动音乐播放器,我想把它变成一个应用程序。问题是音频在本地不起作用,它在流式传输时有效但在本地不起作用(如在设备上)。我正在使用带有自定义XML播放列表的J-player Circle Player,无论如何我一直收到此错误(尝试在没有有效媒体播放器的情况下调用getDuration),其中研究与权限或文件目录错误有关,所以有人请帮助我

这是我的HTML

    <!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link href="css/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<!-- Music Script-->
<link rel="stylesheet" type="text/css" href="css/circleplayer.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/music.player.min.js"></script>



</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview">
            <li><a href="#page2">Page Two</a></li>
            <li><a href="#page3">Page Three</a></li>
            <li><a href="#page4">Page Four</a></li>
        </ul>       
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="page2">

    <div data-role="header">
    <a data-role="button" data-direction="reverse" href="#page" class="ui-btn-left">
                    Button
                </a>
        <h1>Page Two</h1>
    </div>
    <div id="cp_container">
                        <div class="jp-playlist">
                            <ul style="display: block;"><li class="jp-playlist-current"><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">��</a>
                            </div></div></div>







    <div data-role="footer" data-position="fixed">
        <div id="white-noise-player" class="cp-jplayer" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"></div>




                    <div id="cp_container" align="center">
                        <div class="cp-container">
                            <div class="cp-buffer-holder" style="display: block;">
                                <div class="cp-buffer-1" style="-webkit-transform: rotate(118.65839406080333deg);"></div>
                                <div class="cp-buffer-2" style="display: none;"></div>
                            </div>
                            <div class="cp-progress-holder" style="display: block;">
                                <div class="cp-progress-1" style="-webkit-transform: rotate(0deg);"></div>
                                <div class="cp-progress-2" style="-webkit-transform: rotate(0deg); display: none;"></div>
                            </div>
                            <div class="cp-circle-control"></div>
                            <ul class="cp-controls">
                                <li><a  class="cp-play" tabindex="1" style="">play</a></li>
                                <li><a  class="cp-pause" style="display: none;" tabindex="1">pause</a></li>
                            </ul>
                        </div>


    </div>
</div>

<div data-role="page" id="page3">
    <div data-role="header">
        <h1>Page Three</h1>
    </div>
    <div data-role="content">   
        Content     
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="page4">
    <div data-role="header">
        <h1>Page Four</h1>
    </div>
    <div data-role="content">   
        Content     
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
<script>
    $(document).ready(function(){
    // Get the Playlist from the xml file
    $.ajax({
        type: "GET",
            url: "**playlist.xml**",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('track').each(function(){
                    var self = $(this),
                         mytitle = self.find('title').text(),
                         myartist = self.find('artist').text(),
                         mymp3 = self.find('mp3').text(),
                         myduration = self.find('duration').text(),
                         playlist = JSON.stringify({ title: mytitle, artist : myartist, mp3 : mymp3, duration : myduration }),// Convert the XML nodes into JSON formatted strings
                         playlistObject = $.parseJSON(playlist); // Convert the JSON formatted strings into JSON objects and add to playlist

                    myPlaylist.add(playlistObject);
            });
        }
    });

     // WhiteNoise Player instance
        var whiteNoise = new CirclePlayer("#white-noise-player", {}, {
                cssSelectorAncestor: "#cp_container"
        });

        // WhiteNoise Playlist instance
        var myPlaylist = new jPlayerPlaylist({
            jPlayer: "#white-noise-player",
            cssSelectorAncestor: "#cp_container",
        }, [ 
                // Playlist is created when the page loads via ajax
            ], 
        {
            playlistOptions: {
              autoPlay: false, // self explanatory
              loopOnPrevious: false, //  If loop is active, the playlist will loop back to the end when executing previous()
              shuffleOnLoop: true, //  If loop and shuffle are active, the playlist will shuffle when executing next() on the last item
              enableRemoveControls: false, // Adds an x that allows user to remove songs from playlist
              displayTime: 0, // how fast the playlist transitions on page load
              addTime: 'fast', // transition time when adding a song
              removeTime: 'fast', // transition time when removing a song
              shuffleTime: 'slow' // transition time when shuffling playlist


            },
            swfPath: "../scripts",
            supplied: "mp3", // add the file format extension you will be streaming
            wmode: "window"

        });
    });
    </script>
</body>
</html>

这是我的XML播放列表

    <playlist>
    <track>
        <title>Test 1</title>
        <artist>Test Artist</title>
        <mp3>/android_asset/www/03.mp3</mp3>
        <free>false</free>
        <duration>4:20</duration>
    </track>
    <track>
        <title>Voices</title>
        <artist>Bedrock</artist>
        <mp3>http://www.beyondhyper.com/mp3/Bedrock- Voices.mp3</mp3>
        <free>false</free>
        <duration>4:37</duration>
    </track>
    <track>
        <title>Timeless</title>
        <artist>Transa</artist>
        <mp3>http://www.beyondhyper.com/mp3/Transa-Timeless.mp3</mp3>
        <free>false</free>
        <duration>6:02</duration>
    </track>
        <track>
        <title>Timeless</title>
        <artist>Transa</artist>
        <mp3>http://www.beyondhyper.com/mp3/Transa-Timeless.mp3</mp3>
        <free>false</free>
        <duration>6:02</duration>
    </track>
</playlist>

对不起,这是一个很长的问题,但我很想继续我的项目

干杯

1 个答案:

答案 0 :(得分:0)

您可以先计算数据XML / JSON。然后使用循环添加到播放列表, 像这样:

for (var i < total; i++) myPlaylist.add({"mp3":"path_your_music"})