Question

我希望我的网站上的按钮（主页，关于，博客）在有人单击时播放一些声音或音乐。现在，我尝试了许多，但无法在javascript代码中找到错误。

<body onload="htmlIsReady()">
<script type="text/javascript">


var audio;

var audioLink;


window.onmessage = function(event)  {
if (event.data.data) {
//Passes the audio url to the new variable
    audioLink = event.data.data;
//Created a new audio object with the received audio url        
audio = new Audio('URL of AUDIO-FILE');         
                }
            };


function htmlIsReady() {
window.parent.postMessage("html_is_ready", "*");  
 }  

//Funcion that plays the audio
function playAudio() {
 audio.play.play();   
 }

</script>

 // Button that executes the function that plays the audio everytime it's 
 clicked 
 <button class="button" onclick="playAudio()">Play</button>

 </body>

Answer 1

您正在使用audio.play.play()，它应该是：audio.play()。但是，您也没有提供任何实际的正确URL /相对文件路径作为音频源，并且目前您的audio变量从未真正分配为new Audio。

Answer 2

不太清楚为什么要使用 window.onmessage 获取音频文件的url，但是无论如何，它都不起作用，因为 event.data.data 是完全错误的。要获取已发布邮件的数据，您必须使用 event.data 。

此外，您还在此处将数据分配给名为 audioLink

的变量

private static class StyleableProperties {

     private static final CssMetaData<CustomControl, Number> MIN_LABEL_WIDTH =
            new CssMetaData<>("-min-label-width", SizeConverter.getInstance(), 100.0) {

        @Override
        public Number getInitialValue(CustomControl node) {
            // A vertical Slider should remain vertical
            return node.getMinLabelWidth();
        }

        @Override
        public StyleableProperty<Number> getStyleableProperty(CustomControl control) {
            return (StyleableProperty<Number>) control.minLabelWidthProperty();
        }

        @Override
        public boolean isSettable(CustomControl control) {

            return control.minLabelWidth == null || !control.minLabelWidth.isBound();
        }

    };

    private static final List<CssMetaData<? extends Styleable, ?>> STYLEABLES;
    static {
        final List<CssMetaData<? extends Styleable, ?>> styleables = 
                new ArrayList<>(Control.getClassCssMetaData());
        styleables.add(MIN_LABEL_WIDTH);

        STYLEABLES = Collections.unmodifiableList(styleables);
    }
}

public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
    return StyleableProperties.STYLEABLES;
}

@Override
public List<CssMetaData<? extends Styleable, ?>> getControlCssMetaData() {
    return getClassCssMetaData();
}

但实际上不要将其用于HtmlAudioElement 音频的实例化。

最后， audio.play.play（）; 是错误的。要开始播放，您只需在音频对象-audio.play（）上使用play（）方法。

这是一个可行的示例：

audioLink = event.data.data;

var audio;
var audioLink;

function playAudio() {
  audio.play();
}

window.onmessage = function(event) {
  if (event.data) {
    audioLink = event.data;
    audio = new Audio(audioLink);
  }
};

window.postMessage("https://www.w3schools.com/tags/horse.ogg", "*");

为什么我的JavaScript代码无法播放音乐？

2 个答案: