Currently, I am in the process of creating a music website and facing an issue where I need to pass the name of the file when the user clicks on the music cover image to the HTML5 audio tag. My approach involves playing songs using PHP, but it requires a page refresh before the audio can start playing. I aim to achieve this functionality with AngularJS so that the page remains dynamic without the need for refreshing.
To optimize efficiency, I have decided to store the file name as the Image Name. This saves me from accessing the database repeatedly to retrieve the file name. Here is my code:
<div class="container" ng-app="myapp" ng-controller="myController" ng-init="select()">
<div class="col-md-3" ng-repeat="file in files">
<a href="?play={{file.songname}}"><img ng-src="mainpagecontent/{{file.name}}" name="{{file.songname}}" ng-init="select()" onclick=""width="220" height="220" style="padding:16px; margin:2px;" alt="music"/>
<br/>
<label style="margin-left:20px;padding-left:5px ">{{file.songname}}</label></a>
</div>
</div>I would greatly appreciate any assistance or guidance provided regarding this matter.