Question

点击时停止播放音频播放器有问题。播放器成功启动，但我再次点击时无法阻止它。你能帮帮我吗？这是一个代码：

$(".portfolio-listen").click(function(e) {
  e.preventDefault();
  var audioUrl = $(this).attr("href");
  var audioElement = document.createElement("audio");
  audioElement.setAttribute('src', audioUrl);
  $(this).toggleClass("playing");

  if ($(this).hasClass("playing")) {
    audioElement.play();
  } else {
    audioElement.pause();
  }


});

Answer 1

如果您希望根据单击的按钮加载新的音频源，此示例可能会变得更复杂，但要使音频元素全局并检查它是否已定义，然后继续切换音频播放/暂停。 / p>

＆＃13;

import { Pipe, PipeTransform } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Pipe({ 
    name: 'event'
})

export class EventPipe implements PipeTransform {
    subscriptions: Array<any> = new Array<any>();
    items: Array<any> = new Array<any>();
    constructor(
        protected db: AngularFireDatabase
    ){}

    public transform(personId: any, eventType: any) { 
        if (!personId || !eventType) return [];  

        console.info("personId: " + personId);
        console.info("eventType: " + eventType);

        this.subscriptions.push(
            this.db.list('/event', {
                query: {
                    limitToLast: 200
                }
            }).subscribe(items => {
                console.info(items);
                this.items = items;
                return this.items;
            })
        );

    }
}

＆＃13;

// for demo purpose, use var audioUrl = $(this).href('href')
var audioUrl = 'https://allthingsaudio.wikispaces.com/file/view/Shuffle%20for%20K.M.mp3/139190697/Shuffle%20for%20K.M.mp3';

// Make audioElement global
var audioElement;


$(".portfolio-listen").click(function(e) {

  e.preventDefault();
 
  if(!audioElement){
      audioElement = document.createElement("audio");
      audioElement.setAttribute('src', audioUrl);
  }
  
  $(this).toggleClass("playing");
  
  if ($(this).hasClass("playing")) {
    audioElement.play();
  } else {
    audioElement.pause();
  }


});

＆＃13;

button {
   background: #e91e63;
}
button.playing {
   background: #8bc34a;
}

＆＃13;

点击时无法停止音频

1 个答案: