Angular动画在调用动画触发器时附带声音/音频。

huangapple go评论123阅读模式
英文:

Angular animation with plugged sounds/audio when animation trigger is being called

问题

  1. 我正在寻找一个解决方案,每次调用Angular动画触发器时都能播放音频。我有一个包含8个元素(8个触发器)的动画,它们具有不同的持续时间和延迟。
  2. 我尝试在动画启动时实现`audio.play()`方法,但它完全无法正常工作。
  3. `(@trigger.start)="playAudio($event)"`
  4. playAudio(event: any) {
  5. if (event['fromState'] !== 'void') {
  6. let audio = new Audio('../../assets/audio/click1.wav');
  7. audio.play();
  8. }
  9. }
英文:

I am looking for a solution to play audio each time the Angular animation trigger is called. I have an animation with 8 elements (8 triggers) with different duration and delays.

I was trying to implement audio.play() method each time animation has started but it's not working properly at all.

(@trigger.start)="playAudio($event)"

  1. playAudio(event: any) {
  2. if (event['fromState'] !== 'void') {
  3. let audio = new Audio('../../assets/audio/click1.wav');
  4. audio.play();
  5. }
  6. }

Thank you for any help!

答案1

得分: 2

我认为你不应该每次调用该函数时都创建一个新的音频对象。这可能会导致不一致,特别是如果你快速连续调用它。你可以预加载音频,只在需要时播放:

  1. import { Component } from '@angular/core';
  2. import { trigger, transition, style, animate } from '@angular/animations';
  3. @Component({
  4. selector: 'app-your-component',
  5. templateUrl: './your-component.component.html',
  6. styleUrls: ['./your-component.component.css'],
  7. animations: [
  8. trigger('trigger', [
  9. transition(':enter', [
  10. style({ opacity: 0 }),
  11. animate('1s', style({ opacity: 1 })),
  12. ]),
  13. ]),
  14. ],
  15. })
  16. export class YourComponent {
  17. private audio: HTMLAudioElement;
  18. constructor() {
  19. this.audio = new Audio('../../assets/audio/click1.wav');
  20. }
  21. playAudio(event: any) {
  22. if (event['fromState'] !== 'void') {
  23. this.audio.play();
  24. }
  25. }
  26. }

你在HTML/模板中的绑定保持不变:

  1. <div [@trigger.start]="playAudio($event)"></div>
英文:

I think you shouldn't create a new Audio Object, everytime you call the function. This can lead to inconsistency as you said, especially if u call it in quick succession. You can preload the audio and just play it when needed:

  1. import { Component } from &#39;@angular/core&#39;;
  2. import { trigger, transition, style, animate } from &#39;@angular/animations&#39;;
  3. @Component({
  4. selector: &#39;app-your-component&#39;,
  5. templateUrl: &#39;./your-component.component.html&#39;,
  6. styleUrls: [&#39;./your-component.component.css&#39;],
  7. animations: [
  8. trigger(&#39;trigger&#39;, [
  9. transition(&#39;:enter&#39;, [
  10. style({ opacity: 0 }),
  11. animate(&#39;1s&#39;, style({ opacity: 1 })),
  12. ]),
  13. ]),
  14. ],
  15. })
  16. export class YourComponent {
  17. private audio: HTMLAudioElement;
  18. constructor() {
  19. this.audio = new Audio(&#39;../../assets/audio/click1.wav&#39;);
  20. }
  21. playAudio(event: any) {
  22. if (event[&#39;fromState&#39;] !== &#39;void&#39;) {
  23. this.audio.play();
  24. }
  25. }
  26. }

Your binding in the html/template stays the same:

  1. &lt;div [@trigger.start]=&quot;playAudio($event)&quot;&gt;&lt;/div&gt;

huangapple
  • 本文由 发表于 2023年8月10日 20:16:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76875666.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定