jquerycssasp.net-mvctwitter-bootstrapmediaelement.js

How to show MediaElementJS audio playlist to be shown on top of the controls?


I have a mediaelementjs audio player in the footer as shown in this image below.

My questions are posted in the image above.

I want my audio player to look like this joomla audio player below (I am doing my project in Asp.Net MVC c#). Joomla player is in php,I could not use it my project.The playlist is shown to top of control bar when toggled. Mine toggles down below the control bar.

Joomla Sticky Full Width Audio

enter image description here

I used MediaElementJS audio, I want playlist toggle up above the control bar, not down.

enter image description here


Solution

  • I was able to change the scrollbar design colors and color by using changing css of -webkit-scrollbar.

    -webkit-scrollbar css

    Then,for making the playlist appear on top of control bar rather than bottom of it,all I had to change is playlistposition property of the mediaelementJS to 'top'.

                  $(function () {
                    $('#mejsAudio').mediaelementplayer({
                        loop: true,
                        shuffle: true,
                        playlist: true,
                        audioHeight: 30,
                        audioWidth:  "100%",
                        playlistposition: 'top',
                        audioVolume: 'vertical',
                        features: ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'playlist', 'current', 'progress', 'duration', 'volume']
                          });
    
                });