我有一个可以由用户插入的jQuery脚本（在CMS中）。此脚本将最后一个链接转换为mp3文件（最后一个意思是：相对于最近的标记）转换为HTML5元素，并在此音频下方插入一个播放按钮。直到这一点，脚本运行良好，但我没有完成播放，按钮不播放音频文件。＆＃xA;那里出了什么问题？
＆＃xA;＆＃xA;我的代码（小提琴是这里）：
＆＃xA;＆＃ xA;
＆lt; script src =”https://ajax.googleapis.com/ajax/libs /jquery/1.11.1/jquery.min.js"></script>
<a href =“http://www.freesfx.co.uk/rx2/mp3s/ 5 / 16797_1460740933.mp3“＆gt; SOUND-1＆lt; / a＆gt;＆＃xD;＆＃xA;＆lt; a href =”http://www.freesfx.co.uk/rx2/mp3s/5/16983_1461335348.mp3 “＆gt; SOUND-2＆lt; / a＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; script class =”auto-play-button“＆gt;＆＃xD;＆＃xA; function LinkToAudio（element）{＆＃xD;＆＃xA; var audioURL = jQuery（element）.attr（'href'）;＆＃xD;＆＃xA; var audioName = jQuery（element）.text（）;＆＃xD;＆＃xA; jQuery的（元件）。之前（ '＆LT峰; br /＆GT;'）;＆＃的xD;＆＃XA; jQuery（element）.after（'＆lt; br /＆gt;＆lt; audio src =“'+ audioURL +'”type =“audio / mpeg”preload =“none”＆gt;＆lt; / audio＆gt;＆lt; br /＆gt ;'）;＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; //将最后一个mp3-link（相对于此＆lt; script＆gt;标记）转换为HTML5音频元素＆＃xD;＆＃xA; LinkToAudio（$（ '一个[HREF $ = “MP3”]：最后'））;＆＃的xD;＆＃XA; var audioelement = $（'audio：last'）;＆＃xD;＆＃xA; //在最后一次＆lt; audio＆gt;之后插入播放按钮标签（相对于此＆lt; script＆gt;标签）＆＃xD;＆＃xA; $（'＆lt; button id =“audio”＆gt; Play Sound above＆lt; / button＆gt;'）。insertAfter（audioelement）;＆＃xD;＆＃xA; $（“body”）。on（“click”，“button”，audioelement.play（））;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; / script＆gt;＆＃xD;＆ #xA;＆＃xD;＆＃xA;＆lt; a href =“http://www.freesfx.co.uk/rx2/mp3s/4/16539_1460655601.mp3”＆gt; SOUND-3＆lt; / a＆gt; ＆＃的xD;＆＃XA; 答案 0 :(得分：1)
import {Component,HostListener,Directive,HostBinding,Input} from '@angular/core';
@Directive({selector: '[myDir]'})
export class HostDirective {
@HostBinding('attr.role') role = 'admin';
@HostListener('click') onClick() {
this.role=this.role=='admin'?'guest':'admin';
}
}
我能看到的第一件事是你的按钮处理程序不会按预期运行 - 它会尝试立即触发import { Component,ElementRef,ViewChild } from '@angular/core';
import {HostDirective} from './directives';
@Component({
selector: 'my-app',
template:
`
<p myDir>Host Element
<br><br>
I'm(HostListener) listening to host's <b>click event</b> declared with @HostListener
<br><br>
I'm(HostBinding) binding <b>role property</b> to host element declared with @HostBinding and checking host's property binding updates, If any property change is found, I will update it.
</p>
<div> Open DOM of host element, click host element(in UI) and check role attribute(in DOM) </div>
`,
directives: [HostDirective]
})
export class AppComponent {}
方法，因为你直接调用它。其次，需要在音频元素上调用$("body").on("click", "button", audioelement.play());方法，而不是在JQuery元素上调用，因此play错误。
试试这个：
play
编辑：原创海报的目的是让脚本标签可以在某种WYSIWG设置中作为片段重复使用，小提琴+片段更新时考虑到了这一点。
Check below example live in plunker - A simple example about @HostListener & @HostBinding
...audioelement.play is not a function