Javascript 如何将带有音频文件的Android相册转换为HTML？

我正在尝试列出一个选项卡以按相册进行筛选。我已设法在另一个“全部”选项卡上显示所有音频文件

我确实使用MediaStore.Audio.AudioColumns.Album显示了相册名称。如果一张专辑有5首歌曲，它将填充5个专辑名

如何将它们组合在一起，并作为“文件夹”单击并显示内部音频项目

我在Android Studio获取唱片集名称的代码：

public ArrayList<AudioModel> getAllAudioFromDevice (Context context){
        final ArrayList<AudioModel> tempAudioList = new ArrayList<>();

        Uri uri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
        String[] projection = {
                MediaStore.Audio.AudioColumns.DATA,
                MediaStore.Audio.AudioColumns.TITLE,
                MediaStore.Audio.AudioColumns.ALBUM,
                MediaStore.Audio.ArtistColumns.ARTIST,
                MediaStore.Audio.AudioColumns.DURATION,
        };

        Cursor c = context.getContentResolver().query(uri, projection, null, null, null);

        if (c != null) {
            while (c.moveToNext()) {
                AudioModel audioModel = new AudioModel();
                String path = c.getString(0); // Retrieve path.
                String name = c.getString(1); // Retrieve name.
                String album = c.getString(2); // Retrieve album name.
                String artist = c.getString(3); // Retrieve artist name.
                String duration = c.getString(4); // Retrieve duration.

                audioModel.setaName(name);
                audioModel.setaAlbum(album);
                audioModel.setaArtist(artist);
                audioModel.setaPath(path);
                audioModel.setaDuration(duration);

                tempAudioList.add(audioModel);

            }
            c.close();
        }

        return tempAudioList;

    }   

公共阵列列表getAllAudioFromDevice（上下文）{
最终ArrayList tempAudioList=新ArrayList（）；
Uri Uri=MediaStore.Audio.Media.EXTERNAL\u CONTENT\u Uri；
字符串[]投影={
MediaStore.Audio.AudioColumns.DATA，
MediaStore.Audio.AudioColumns.TITLE，
MediaStore.Audio.AudioColumns.ALBUM，
MediaStore.Audio.ArtistColumns.ARTIST，
MediaStore.Audio.AudioColumns.DURATION，
};
游标c=context.getContentResolver（）.query（uri、投影、null、null、null）；
如果（c！=null）{
while（c.moveToNext（））{
AudioModel AudioModel=新的AudioModel（）；
String path=c.getString（0）；//检索路径。
String name=c.getString（1）；//检索名称。
String album=c.getString（2）；//检索相册名称。
String artist=c.getString（3）；//检索艺术家名称。
字符串持续时间=c.getString（4）；//检索持续时间。
audioModel.setaName（名称）；
audioModel.setaAlbum（专辑）；
听觉模型。塞塔尔蒂斯特（艺术家）；
audioModel.setaPath（路径）；
听力模型。设置调整（持续时间）；
tempAudioList.add（audioModel）；
}
c、 close（）；
}
返回临时音频列表；
}   

Android Studio上的我的JavascriptInterface代码：

@JavascriptInterface
        public String getmp3album(){
            ArrayList<AudioModel> allMp3 = getAudioAlbumFromDevice(this.activity);
            List<AudioModel> listStrings = new ArrayList<>(allMp3);

            String tempAlbum= "";

            for (int i = 0; i < listStrings.size(); i++) {

                String AudioAlbum = listStrings.get(i).aAlbum;

                    tempAlbum += AudioAlbum + ",";

            }

            return tempAlbum;
        }

@JavascriptInterface
公共字符串getmp3album（）{
ArrayList allMp3=getAudioAlbumFromDevice（this.activity）；
List listStrings=newarraylist（allMp3）；
字符串tempAlbum=“”；
对于（int i=0；i

My HTML index.HTML侧代码：

<div id="albumwrap">
                <ul id="albumlist"></ul>
            </div>

index.html上的我的Javascript代码：

function showAlbumList(){

    var stringAlbum = window.AndroidFunction.getmp3album();
    var arrayAlbum = stringAlbum.split(",");


    var select = document.getElementById('albumlist');        

    for (var i = 0; i < arrayAlbum.length; i++) {

        var li = document.createElement("li");             
        li.setAttribute('class', 'plItem');

        var link = document.createElement("a");            
        link.setAttribute('class', 'plTitle');
        link.setAttribute('href', arrayAlbum[i]);           
        li.appendChild(link);                               
        var text = document.createTextNode(arrayAlbum[i]);
        link.appendChild(text);                            

        select.insertBefore(li, select.childNodes[i]);
    }
}
window.onLoad = showAlbumList();

函数showAlbumList（）{
var stringAlbum=window.AndroidFunction.getmp3album（）；
var arrayAlbum=stringAlbum.split（“，”）；
var select=document.getElementById（'albumlist'）；
对于（变量i=0；i

现在显示： 专辑1 专辑1 专辑1 专辑2 专辑2

预期： +专辑1 -歌曲1 -歌曲2 -歌曲3 +专辑2 -歌曲1

---

-song2

如果您使用的是webview，那么您可以将其替换为富文本视图：

---

然后使用上述库，并设置“SetOnPanClickedObserver”以获得所需的输出

如果您使用的是Web视图，则可以将其替换为富文本视图：

然后使用上述库，并设置“setOnPanClickedObserver”以获得所需的输出