HTML5 Audio Player with Knockout.js Playlist

html_excerpt.html

<audio id="audioplayer" controls="controls" autoplay="autoplay" data-bind="attr:{src: selectedFile}"></audio>
<p>Selected song: <span id="audioplayer" data-bind="text: selectedSong"></span></p>
<img data-bind="attr:{src: selectedCover}" width="200"/>

<tbody data-bind="foreach: availableSongs">
	<tr>
		<td data-bind="text: artist"></td>
		<td><img data-bind="attr:{src: cover}" width="60"/>&nbsp;<span data-bind="text: album"></span></td>
		<td data-bind="text: title"></td>
		<td><a href="#" data-bind="click: $root.selectSong">PLAY</a></td>
	</tr>
</tbody>

javascript_excerpt.js

// Overall viewmodel for this screen, along with initial state
function PlaylistViewModel() {
	var self = this;
				
	self.availableSongs =	[{ id:0, artist: "The AATS", album: "The AATS", cover: "audio/the_aats.jpeg", title: "Hae Man! V2", file:"audio/the_aats-hae_man_v2.mp3" }, { id:1, artist: "The AATS", album: "The AATS", cover: "audio/the_aats.jpeg", title: "Piyambakan", file:"audio/the_aats-piyambakan.mp3" }];
				
	self.selectedFile = ko.observable();
	self.selectedCover = ko.observable();
	self.selectedSong = ko.observable();
				
	self.selectSong = function(data) {
		self.selectedCover(data.cover);
		self.selectedFile(data.file);
		self.selectedSong(data.artist+" - "+data.title);
	}
				
}

	ko.applyBindings(new PlaylistViewModel());