Question

我正在创建一个音乐网站，所以我想在单击音乐封面图像时将文件名传递给html5音频标签。现在我正在使用php播放歌曲，但需要在播放音频之前刷新页面但是我想用angularjs做到这一点，所以页面不会刷新。

我将文件名存储为图像名称，这样我就可以胜任，无需再次访问数据库即可获取代码的文件名

  <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>

任何帮助将不胜感激。

Answer 1

我认为您正在寻找一种通过单击图像来播放音频的方法？很难看到更多的代码而不是具体的，但这应该带给您一个示例，您可以根据自己的需要进行一些调整：

controller.js

$onInit(){
  this.sound1 = 'https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-21014/zapsplat_foley_brick_small_move_scrape_on_dirty_concrete_012_22190.mp3';
  this.sound2 = 'https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-18146/zapsplat_technology_vr_headset_phone_tray_holder_slide_out_then_in_19162.mp3';
  this.soundToPlay = this.sound1;
}

switchSound(){
  this.soundToPlay = (this.sound === this.sound1) ? this.sound2 : this.sound1;
}

index.html

<div>Audio url: {{$ctrl.soundToPlay}}</div>
<hr>
<button ng-click="$ctrl.playSound()">Play</button>
<audio
    id="test"
    controls
    src="{{$ctrl.soundToPlay}}">
    Your browser does not support the <code>audio</code> element.
</audio>

希望这会有所帮助

如何使用angularjs在HTML5音频标签中提供src值

1 个答案: