Results 1 to 3 of 3

Thread: Play Multiple Songs Using <Audio> Control

  1. #1

    Thread Starter
    Member
    Join Date
    Jul 2016
    Posts
    33

    Play Multiple Songs Using <Audio> Control

    The following code loads songs from the "Songs" folder into a listbox. I can click on any of the songs in the listbox, which loads the song into an <AUDIO> control. I can click play on the Audio control to play the song.

    Code:
    <script language="vbscript" runat="server">
    
        Public SongToPlay As String
        
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            If Not IsPostBack Then ' First time ASPX page is loaded.
                
                SongToPlay = "Songs/Song1.mp3"
                
                Dim pathLocal As String
                Dim pathSongs As String
                
                ' Get current path
                pathLocal = HttpContext.Current.Server.MapPath(HttpContext.Current.Request.ServerVariables("PATH"))
                pathSongs = pathLocal & "\Songs"
                
                Dim MyFile, MyPath As String
                MyPath = pathSongs   ' Set Folder location for songs
                MyFile = Dir(pathSongs & "\*.mp3")
                
                Do While MyFile <> ""   ' Start the loop.
                    ' Use bitwise comparison to make sure MyName is a directory.
                    lbAllSongs.Items.Add(MyFile)
                    MyFile = Dir()   ' Get next entry.
                Loop
    
                lbAllSongs.SelectedIndex = 0 ' Sets first song as default 
                
            Else
                
                lblSelectedSong.Text = lbAllSongs.SelectedItem.Text
                SongToPlay = "Songs/" & lbAllSongs.SelectedItem.Text
            
            End If '  If Not IsPostBack
            
        End Sub ' Page_Load
    
    </script>
    However, I would like it to play through the list of songs in the listbox without me having to click on each individual song.

    I am trying to call a VB subroutine from within the <AUDIO> tag using the onended event. Here's the code:

    Code:
     <audio id="audioPlayer" src="<%=SongToPlay %>" controls="true" onended="audioPlayerOnEnded()"></audio>
    For some reason, it's not recognizing the subroutine that I'm calling. The onended has to be a Javascript routine, but I'm trying to call a VBScript from with Javascript.

    If I can get the onended event to work, I could figure out a routine to play the next song without having to manually click an item in the listbox.

    If this doesn't work, anyone have suggestions to play multiple songs using the <AUDIO> control?

    Thanks in advance for the help.

  2. #2
    PowerPoster Poppa Mintin's Avatar
    Join Date
    Mar 2009
    Location
    Bottesford, North Lincolnshire, England.
    Posts
    2,423

    Re: Play Multiple Songs Using <Audio> Control

    Here are a couple of suggestions:
    Code:
                If ListBox1.Items.Count > 0 then
                    track = ListBox1.Items(0)
                    ListBox1.Items.RemoveAt(0)
    
    	'Put your playing code in here, or the Subroutine to play it for you.
    
                End If.
    
    
    
                For i = 0 to ListBox1.Items.Count - 1
                    track = ListBox1.Items(i)
    
    	'Put your playing code in here, or the Subroutine to play it for you.
    
                Next

    Poppa.


    PS. Are you sure you're in the correct forum ? This is for VB.NET.

    Pop.
    Last edited by Poppa Mintin; Feb 21st, 2020 at 07:09 PM. Reason: PS added
    Along with the sunshine there has to be a little rain sometime.

  3. #3

    Re: Play Multiple Songs Using <Audio> Control

    Hello,

    Try this code this can be work.

    JS

    Code:
    jQuery(function($) {
      var supportsAudio = !!document.createElement('audio').canPlayType;
      if(supportsAudio) {
        var index = 0,
        playing = false,
        tracks = [
          {"track":1,"name":"SoundHelix Song 1","length":"06:12","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"},
          {"track":2,"name":"SoundHelix Song 3","length":"05:44","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"},
          {"track":3,"name":"SoundHelix Song 8","length":"05:25","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3"}
        ],
        trackCount = tracks.length,
        npAction = $('#npAction'),
        npTitle = $('#npTitle'),
        audio = $('#audio1').bind('play', function() {
          playing = true;
          npAction.text('Now Playing:');
        }).bind('pause', function() {
          playing = false;
          npAction.text('Paused:');
        }).bind('ended', function() {
          npAction.text('Paused:');
          if((index + 1) < trackCount) {
            index++;
            loadTrack(index);
            audio.play();
          } else {
            audio.pause();
            index = 0;
            loadTrack(index);
          }
        }).get(0),
        btnPrev = $('#btnPrev').click(function() {
          if((index - 1) > -1) {
            index--;
            loadTrack(index);
            if(playing) {
              audio.play();
            }
          } else {
            audio.pause();
            index = 0;
            loadTrack(index);
          }
        }),
        btnNext = $('#btnNext').click(function() {
          if((index + 1) < trackCount) {
            index++;
            loadTrack(index);
            if(playing) {
              audio.play();
            }
          } else {
            audio.pause();
            index = 0;
            loadTrack(index);
          }
        }),
        loadTrack = function(id) {
          $('.plSel').removeClass('plSel');
          $('#plTrack>div:eq(' + id + ')').addClass('plSel');
          npTitle.text(tracks[id].name);
          index = id;
          audio.src = tracks[id].file;
        },
        displayTrack = function(){
          var parent = $('#plTrack');
          $.each(tracks, function(i, track) {
            $('<div></div>').addClass('row')
            .append($('<div></div>').addClass('col-sm').text(track.track))
            .append($('<div></div>').addClass('col-sm').text(track.name))
            .append($('<div></div>').addClass('col-sm').text(track.length))
            .appendTo(parent);
          });
        },
        playTrack = function(id) {
          loadTrack(id);
          audio.play();
        };
    
        displayTrack();
        loadTrack(index);
      }
    });
    CSS

    Code:
    #plTrack .plSel {
      font-weight: bold;
    }
    .header {
      color: #999;
      border-bottom: 1px solid #999;
    }
    HTML

    Code:
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    
    <div>
      <div>
        <div class="row">
          <div class="col-6"><h3 id="npAction">Paused:</h3></div>
          <div class="col-6" id="npTitle"></div>
        </div>
        <div class="row">
          <div class="col-6">
            <audio id="audio1" controls="controls">
              Your browser does not support the HTML5 Audio Tag.
            </audio>
          </div>
          <noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript>
          <div class="col-6">
            <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button>
          </div>
        </div>
        <div>
          <div class="row header">
            <div class="col-sm">#</div>
            <div class="col-sm">Title</div>
            <div class="col-sm">Length</div>
          </div>
          <div id="plTrack"></div>
        </div>
      </div>
    </div>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width