English 中文(简体)
引诱(许诺)DOMException: 元件没有佐证来源错误
原标题:Calling .play() creates "Uncaught (in promise) DOMException: The element has no supported sources." error

我试图追随Wes Boss savascript30的教导,但当我试图把“Javascript Drumitoki”网站做成时,我无法发挥任何作用。 这里有适当的正确档案,但当我向关键者发出压力,试图发挥声望时,这一错误信息在我检查圣经时出现:

jsdrumkit.html:66 - 失业(许诺): 该元素没有佐证来源。

这是该网站的印章:

function playSound(e){
    //querySelector() is just when you need a single return value
    //audio[input] is an attribute selector, and it works just like its CSS counterpart.
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
    if(!audio) return; 
    audio.currentTime = 0; //rewind the file to the start

    audio.play(); //**line 66 in the site s code**
    console.log(key);
    key.classList.toggle( playing );
}

function removeTransition(e) {
    if(e.propertyName !==  transform ) return; //skip if it s not a transform
    this.classList.remove( playing );
}

const keys = document.querySelectorAll( .key );
keys.forEach(key => key.addEventListener( transitionend , removeTransition));
window.addEventListener( keydown , playSound);

如果我甚至能够工作,我就失去了什么?

问题回答

Trylyn 。 去年对 Chrome的更新造成了在涉及许诺、部分内容等时使用录音的问题。 Im在寻找解决办法方面工作,但目前已经找到了一种办法:

我在<代码><video> tag in android cordova app上存在类似问题。 几个小时后,即发现问题是由公民保护委员会(Content Security Policy)造成的,但是,关于公民保护委员会的错误信息没有出现在女权组织(只有“无支持来源”错误)。

Adding this to your html file should solve the issue (But modify to fit your needs (especially, if loading some external content, restrict as much as possible to prevent XSS!)):
<meta http-equiv="Content-Security-Policy" content="default-src * cdvfile: data: mediastream: blob: filesystem: about: ws: wss: unsafe-eval wasm-unsafe-eval unsafe-inline ; script-src * data: blob: unsafe-inline unsafe-eval ; connect-src * data: blob: unsafe-inline ; img-src * data: blob: unsafe-inline cdvfile: ; frame-src * data: blob: ; style-src * data: blob: unsafe-inline ;font-src * data: blob: unsafe-inline ;frame-ancestors * data: blob: unsafe-inline ; media-src * data: blob: unsafe-inline cdvfile: ">

最重要的部分是:media-src* data: blob:security-inline ,使媒体档案(包括音频)从blob上载:。 缩略语

EDIT:还需要使用:

v.setAttribute( autoplay ,  true ); 
v.addEventListener( play , function(){this.pause()})

(Yes, really réupid Code, but addressed the issue in my case (at mini-based AndersView))





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签