-
Feb 21st, 2020, 05:48 PM
#1
Thread Starter
Member
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.
-
Feb 21st, 2020, 07:07 PM
#2
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.
-
Jul 6th, 2020, 10:58 PM
#3
Member
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">|<< Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track >>|</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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|