Javascript MediaElement.js+；jquery具有改进的播放列表（希望如此）

我的javascript框架：jquery 1.8.3

使用mediaelement.js和播放列表播放音频（来自此线程）

我一直在试图找出如何更改脚本（在底部）以使用这种列表

 <ul class="mejs-list">
     <li class="current"><a href="/media/file-1.mp3">Nice Name for file1</a> 
       other random text or html/img, file description etc </li>
    <li><a href="/media/file-2.mp3">Nice Name for file2</a>other text or html/img</li>
    <li><a href="/media/file-3.mp3">Nice Name for file3</a>other text or html/img</li>
</ul>

其他随机文本或html/img、文件描述等
其他文本或html/img
其他文本或html/img

而不是这个

<ul class="mejs-list">
  <li>/media/file-1.mp3</li>
  <li class="current">/media/file-2.mp3</li>
  <li>/media/file-3.mp3</li>
</ul>

/媒体/文件-1.mp3
/media/file-2.mp3
/媒体/文件-3.mp3

这个脚本将此列表转换为播放列表，效果非常好，但是创建了显示完整路径的链接，我更喜欢从链接中获取src，而不仅仅是li中的文本，因此我可以使用更好的名称

<script>
$(function(){
    $('audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            mediaElement.addEventListener('ended', function (e) {
                mejsPlayNext(e.target);
            }, false);
        },
        keyActions: []
    });

    $('.mejs-list li').click(function() {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).text();
        $('audio#mejs:first').each(function(){
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });

});

function mejsPlayNext(currentPlayer) {
    if ($('.mejs-list li.current').length > 0){ // get the .current song
        var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if '+audio_src);
    }else{ // if there is no .current class
        var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif '+audio_src);
    }

    if( $(current_item).is(':last-child') ) { // if it is last - stop playing
        $(current_item).removeClass('current');
    }else{
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}
</script>

$（函数（）{
$（“音频”）.mediaelementplayer({
成功：函数（mediaElement、domObject）{
mediaElement.addEventListener（'ended'，函数（e）{
mejsPlayNext（e.target）；
}，假）；
},
关键操作：[]
});
$（'.mejs list li'）。单击（函数（）{
$（this）.addClass（'current'）.sides（）.removeClass（'current'）；
var audio_src=$（this）.text（）；
$（'audio#mejs:first'）。每个（函数（）{
this.player.pause（）；
this.player.setSrc（audio_src）；
这个.player.play（）；
});
});
});
函数mejsPlayNext（当前播放器）{
如果（$（'.mejs list li.current'）.length>0{//获取.current歌曲
var current_item=$（'.mejs list li.current:first'）；//:first是在我们只有很少的.current类的情况下添加的
var audio_src=$（当前_项）.next（）.text（）；
$（当前项）.next（）.addClass（'current'）.sides（）.removeClass（'current'）；
console.log（'if'+audio_src）；
}else{//如果没有.current类
var current_item=$（'.mejs list li:first'）；//如果没有.current类，则get:first
var audio_src=$（当前_项）.next（）.text（）；
$（当前项）.next（）.addClass（'current'）.sides（）.removeClass（'current'）；
console.log（'elseif'+audio_src）；
}
如果（$（当前_项）.is（':last child'）{//如果它是最后一个-停止播放
$（当前项）.removeClass（'current'）；
}否则{
currentPlayer.setSrc（音频_src）；
currentPlayer.play（）；
}
}

如果有更好的方法使用jquery和mediaelement.js，我愿意接受建议

p、 美国。

---

如果我能有上一首和下一首曲目的链接，那也将是一个加号，但这不是必需的。

找到了答案，并为每个人的利益发布了答案

HTML

track1
track2
track3

javascript

    <script>
        $(function(){
            $('audio').mediaelementplayer({
                success: function (mediaElement, domObject) {
                    mediaElement.addEventListener('ended', function (e) {
                        mejsPlayNext(e.target);
                    }, false);
                },
                keyActions: []
            });

            $('.mejs-list li').click(function() {
                $(this).addClass('current').siblings().removeClass('current');
                var audio_src = this.id;
                $('audio#mejs:first').each(function(){
                    this.player.pause();
                    this.player.setSrc(audio_src);
                    this.player.play();
                });
            });

        });

        function mejsPlayNext(currentPlayer) {
            if ($('.mejs-list li.current').length > 0){ // get the .current song
                var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes
                var audio_src = $(current_item).next().text();
                $(current_item).next().addClass('current').siblings().removeClass('current');
                console.log('if '+audio_src);
            }else{ // if there is no .current class
                var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class
                var audio_src = $(current_item).next().text();
                $(current_item).next().addClass('current').siblings().removeClass('current');
                console.log('elseif '+audio_src);
            }

            if( $(current_item).is(':last-child') ) { // if it is last - stop playing
                $(current_item).removeClass('current');
            }else{
                currentPlayer.setSrc(audio_src.match('http.*\.mp3'));
                currentPlayer.play();
            }
        }
        </script>

$（函数（）{
$（“音频”）.mediaelementplayer({
成功：函数（mediaElement、domObject）{
mediaElement.addEventListener（'ended'，函数（e）{
mejsPlayNext（e.target）；
}，假）；
},
关键操作：[]
});
$（'.mejs list li'）。单击（函数（）{
$（this）.addClass（'current'）.sides（）.removeClass（'current'）；
var audio_src=this.id；
$（'audio#mejs:first'）。每个（函数（）{
this.player.pause（）；
this.player.setSrc（audio_src）；
这个.player.play（）；
});
});
});
函数mejsPlayNext（当前播放器）{
如果（$（'.mejs list li.current'）.length>0{//获取.current歌曲
var current_item=$（'.mejs list li.current:first'）；//:first是在我们只有很少的.current类的情况下添加的
var audio_src=$（当前_项）.next（）.text（）；
$（当前项）.next（）.addClass（'current'）.sides（）.removeClass（'current'）；
console.log（'if'+audio_src）；
}else{//如果没有.current类
var current_item=$（'.mejs list li:first'）；//如果没有.current类，则get:first
var audio_src=$（当前_项）.next（）.text（）；
$（当前项）.next（）.addClass（'current'）.sides（）.removeClass（'current'）；
console.log（'elseif'+audio_src）；
}
如果（$（当前_项）.is（':last child'）{//如果它是最后一个-停止播放
$（当前项）.removeClass（'current'）；
}否则{
currentPlayer.setSrc（audio_src.match（'http.*\.mp3'）；
currentPlayer.play（）；
}
}

注意：这不验证HTML标准（WC3），但它可以工作，经过测试 Chrome、Safari、mac上的Firefox、最新版本 仍在寻找HTML兼容版本进行验证。

我认为应该是这样

 $(current_item).next().attr('id');

在mejsPlayNext函数中

 <script>
    $(function(){
        $('audio').mediaelementplayer({
            success: function (mediaElement, domObject) {
                mediaElement.addEventListener('ended', function (e) {
                    mejsPlayNext(e.target);
                }, false);
            },
            keyActions: []
        });

        $('.mejs-list li').click(function() {
            $(this).addClass('current').siblings().removeClass('current');
            var audio_src = this.id;
            $('audio#mejs:first').each(function(){
                this.player.pause();
                this.player.setSrc(audio_src);
                this.player.play();
            });
        });

    });

    function mejsPlayNext(currentPlayer) {
        if ($('.mejs-list li.current').length > 0){ // get the .current song
            var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes
            var audio_src = $(current_item).next().attr('id');
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('if '+audio_src);
        }else{ // if there is no .current class
            var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class
            var audio_src = $(current_item).next().attr('id');
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('elseif '+audio_src);
        }

        if( $(current_item).is(':last-child') ) { // if it is last - stop playing
            $(current_item).removeClass('current');
        }else{
            currentPlayer.setSrc(audio_src.match('http.*\.mp3'));
            currentPlayer.play();
        }
    }
    </script>

$（函数（）{
$（“音频”）.mediaelementplayer({
成功：函数（mediaElement、domObject）{
mediaElement.addEventListener（'ended'，函数（e）{
mejsPlayNext（e.target）；
}，假）；
},
关键操作：[]
});
$（'.mejs list li'）。单击（函数（）{
$（this）.addClass（'current'）.sides（）.removeClass（'current'）；
var audio_src=this.id；
$（'audio#mejs:first'）。每个（函数（）{
this.player.pause（）；
this.player.setSrc（audio_src）；
这个.player.play（）；
});
});
});
函数mejsPlayNext（当前播放器）{
如果（$（'.mejs list li.current'）.length>0{//获取.current歌曲
var current_item=$（'.mejs list li.current:first'）；//:first是在我们只有很少的.current类的情况下添加的
var audio_src=$
 <script>
    $(function(){
        $('audio').mediaelementplayer({
            success: function (mediaElement, domObject) {
                mediaElement.addEventListener('ended', function (e) {
                    mejsPlayNext(e.target);
                }, false);
            },
            keyActions: []
        });

        $('.mejs-list li').click(function() {
            $(this).addClass('current').siblings().removeClass('current');
            var audio_src = this.id;
            $('audio#mejs:first').each(function(){
                this.player.pause();
                this.player.setSrc(audio_src);
                this.player.play();
            });
        });

    });

    function mejsPlayNext(currentPlayer) {
        if ($('.mejs-list li.current').length > 0){ // get the .current song
            var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes
            var audio_src = $(current_item).next().attr('id');
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('if '+audio_src);
        }else{ // if there is no .current class
            var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class
            var audio_src = $(current_item).next().attr('id');
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('elseif '+audio_src);
        }

        if( $(current_item).is(':last-child') ) { // if it is last - stop playing
            $(current_item).removeClass('current');
        }else{
            currentPlayer.setSrc(audio_src.match('http.*\.mp3'));
            currentPlayer.play();
        }
    }
    </script>