使用jPlayer到AWS桶0的Javascript路径?

时间:2015-12-22 02:26:50

标签: javascript php amazon-s3 jplayer

我有两个代码块。它们共同协作从我的AWS S3 Container存储桶中列出和播放MP3文件。但我无法弄清楚"专辑封面" (即海报)。 KEEP IN MIND,每个相册文件夹包含一个海报图像,该图像与具有jpg扩展名的文件夹同名。例如,见下文: 文件夹名称:Beatles-Greatest-Hits 文件夹内容: song01.mp3 song02.mp3 song03.mp3 甲壳虫最大-Hits.jpg

这个块工作正常连接到桶:我意识到它很长,但我正在尝试找到海报的路径,所以我把它包括在内。

<script type="text/javascript">
var AWS_AccessKeyId = 'MY-KEY-HERE';
var AWS_SecretAccessKey = 'MY-SECRET-HERE';
var AWS_Region = 'REGION-HERE';
var AWS_BucketName = 'musicpax';
var AWS_MaxKeys = 500;
var AWS_Prefix = 'mpx_music/';
var AWS_SignedUrl_Expires = 900;
</script>
<!-- ***** ///////////////////////// ***** -->
<!-- ***** AWS DISPLAY & LIST SCRIPT ***** -->
<!-- ***** ///////////////////////// ***** -->
<script type="text/javascript">
AWS.config.update({accessKeyId: AWS_AccessKeyId, secretAccessKey: AWS_SecretAccessKey});
AWS.config.region = AWS_Region;
var bucket = new AWS.S3({params: {Bucket: AWS_BucketName}});

function listMoreObjects(marker, prefix, countFiles, countFolders) {
    $('#overlay').show();
    $('#status').html('<div id="statusimg"></div>Loading...');
    bucket.listObjects({MaxKeys: AWS_MaxKeys, Marker: marker, Prefix : prefix, Delimiter : '/' },function (err, data) {
        if (err) {
            $('#status').html('<img src="img/exclamation-red.png"> Could not load objects from S3');
        } else {
            var truncated = data.IsTruncated;
            var nextMarker = data.NextMarker;
            $('#moreobjects').remove();
            renderObjects(data.Contents, countFolders, countFiles, prefix, truncated, nextMarker);
        }
        $('#overlay').hide();
    });
};

function listObjects(prefix) {
    $('#overlay').show();
    $('#status').html('<div id="statusimg"></div>Loading...');
    $('#objects').empty();

    bucket.listObjects({MaxKeys: AWS_MaxKeys, Prefix : prefix, Delimiter : '/' },function (err, data) {
        if (err) {
            $('#status').html('<img src="img/exclamation-red.png"> Could not load objects from S3');
        } else {
            //Load folders...
            //Set breadcrumbs..
            var truncated = data.IsTruncated;
            var nextMarker = data.NextMarker;
            var currentFolder = '<a href="javascript:listObjects(\'\')"><span class="path">root</span></a>';
            var icon = '';
            if  (prefix !== '') {
                currentFolder += '/';
                var folders = prefix.split('/');
                var parent = '';
                var slash = '';
                var topFolder = '';
                for (var i = 0; i < folders.length - 1; i++) {
                    if (folders[i] !== '') {
                        var path = '';
                        parent += slash + folders[i];
                        if ( i > 0 ) {
                            path = parent;
                        } else {
                            path = folders[i];
                        }
                        if ( i !== (folders.length - 2)) { 
                            topFolder = path;
                        }
                        currentFolder += slash + '<a href="javascript:listObjects(\'' + path + '/\')"><span class="path">' + folders[i] + '</span></a>';
                        slash = '/';
                    }
                }
            }

            if (typeof topFolder != 'undefined') {
                if (topFolder !== '') {
                    topFolder += '/';
                }
                icon = '<img src="img/arrow-090.png"/>'
                // $('#objects').append('<li><a href="javascript:listObjects(\'' + topFolder + '\')">' + icon + '<span>...</span></a></li>');
                $('#objects').append('<li><a href="javascript:listObjects(\'' + topFolder + '\')">' + '<span>...</span></a></li>');
            }
            $('#breadcrumb').html('Current folder is : ' + currentFolder);
            //Set folders...
            var countFolders = 0;
            for (var i = 0; i < data.CommonPrefixes.length; i++) {
                var currentPrefix = data.CommonPrefixes[i].Prefix;
                var name = (currentPrefix.replace(prefix, '')).replace('/','');
                icon = '<img src="img/folder-horizontal.png"/>'
                if (prefix !== currentPrefix) {
                    countFolders++;
                    // $('#objects').append('<li style="list-style:none;margin-left:-40px;border:1px solid #00f;"><a href="/musicpax/play3/index.php?p='+currentPrefix +'&t=aws">' + icon + '<span>' + name + '</span></a></li>');
                    $('#objects').append('<li style="list-style:none;padding: 5px 0;margin-left:-40px;border:1px solid #00f;"><a href="/musicpax/play3/index.php?p='+currentPrefix +'&t=aws">' + '<span>' + name + '</span></a></li>');
                }
            }

            renderObjects(data.Contents, countFolders, 0, prefix, truncated, nextMarker);
        }
        //$('#overlay').hide();
    });
};

function renderObjects(contents, countFolders, currentCountFiles, prefix, truncated, nextMarker) {
    //Load files...
    var countFiles = currentCountFiles;
    for (var i = 0; i < contents.length; i++) {
        var key = contents[i].Key;
        var size = Math.ceil(contents[i].Size / 1024);
        var fileName = key.replace(prefix, '');
        // icon = '<img src="img/document.png"/>'
        if (prefix !== key) {
            countFiles++;
            var params = {Bucket: 'bucket', Key: 'key'};
            $('#objects').append('<li style="list-style:none;"><a href="javascript:getObject(\'' + key + '\')">' + icon + '<span>' + fileName + '</span></a></li>');
        }
    }
    if (truncated) {
        $('#status').html('Loaded : ' + countFolders + ' folder(s), showing ' + countFiles + ' item(s) from S3, <a href="javascript:scrollToBottomListObjects()"><img src="img/arrow-270.png">Go to the bottom of the list to load more items.</a>');
        // icon = '<img src="img/plus-circle.png"/>'
        $('#objects').append('<li id="moreobjects"><a href="javascript:listMoreObjects(\'' + nextMarker + '\',\'' + prefix + '\',' + countFiles + ',' + countFolders + ')">' + icon + '<span>Get more items...</span></a></li>');
    } else {
        $('#status').html('Loaded : ' + countFolders + ' folder(s), ' + countFiles + ' item(s) from S3');
    }           
}

function getObject(key) {
    var params = {Bucket: AWS_BucketName, Key: key, Expires: AWS_SignedUrl_Expires};
    var url = bucket.getSignedUrl('getObject', params);
    return url;
    //window.open(url, url);
}

function scrollToBottomListObjects() {
    $('#contents').scrollTop($('#contents').prop("scrollHeight"));
}

function init() {
    $('#headertitle').html(TITLE);
}

$( document ).ready(function() {
    init();
    listObjects(AWS_Prefix);
});
</script>

以下是格式化jplayer代码的代码。我想要获得&#34;海报&#34;路径。如果我弄错了,那么它会正确显示......

bucket.listObjects(
    {
        MaxKeys: AWS_MaxKeys, 
        Prefix : '<?php echo $_REQUEST['p']; ?>', 
        Delimiter : '/' 
    },
    function (err, data) 
    {           
        if(data.Contents.length)
        {
            var prefix = '<?php echo $_REQUEST['p']; ?>';
            for(var countAws=1; countAws < data.Contents.length; countAws++)
            {                               
                var key = data.Contents[countAws].Key;
                var fileName = key.replace(prefix, '');
                var linkAws = getObject(key);
                var newlinkAws = linkAws.split('?');
                var links = newlinkAws[0];
                console.log(links);

                myPlaylist.add({
                    title:""+fileName+"",
                    artist:"Artist",
                    mp3:links,
                    oga:links,
                    poster: ""+currentFolder+"".jpg //<--- HERE IS THE ISSUE
                });                     
            }
        }
    }
)

*******代码&#34;海报:&#34;&#34; + currentFolder +&#34;&#34; .jpg&#34;以上就是问题所在。

上面给出的示例的绝对链接是: AWSS3 / musicpax / mpx_music /甲壳虫最大-点击/甲壳虫最大-Hits.jpg

但由于这是动态的,我不能使用绝对链接。您能否从顶部的代码中提供任何见解 - 这将导致正确的路径配置。

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

这会从链接(路径)中删除该名称...其中显示的是&#39; HERE&#39;

for(var countAws=1; countAws < data.Contents.length; countAws++)
            {                               
                var key = data.Contents[countAws].Key;
                var fileName = key.replace(prefix, '');
                var linkAws = getObject(key);
                var newlinkAws = linkAws.split('?');
                var links = newlinkAws[0];

                /* Gets Album name HERE */
                var album = links;
                album = album.split("/");
                album_name = (album[4]);

                console.log(links);

                myPlaylist.add({
                    title:""+fileName+"",
                    artist:""+album_name+"",
                    mp3:links,
                    oga:links,
                    poster: " "
                });                     
            }