音频不能播放我的闹钟。怎么了?

时间:2014-03-16 21:30:44

标签: javascript html5 html5-audio

当我的闹钟打开时,我的音频没有播放。我已经得到了代码的url和id,但是当我在定时器关闭时播放它时,音频也没有播放。这有什么问题?

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
<style type="text/css">
.time { 
    background-color:#000;
    border:#026efc 4px inset;
    padding:6px;
    color:#0FF;
    font-family:"Silom";
    font-size:20px;
    font-weight:bold;
    letter-spacing:2px;
    display:inline;
}
</style>
<script type="text/javascript">
var set=0;
var audio = document.getElementById('BGSOUND_ID');
ver=parseInt(navigator.appVersion);
ie4=(ver>3  && navigator.appName!="Netscape")?1:0;
function play() {
    if (ie4) 
        document.all['BGSOUND_ID'].src="http://hopto.redirectme.net/Audio/Alarm%20Beeps.mp3";
        document.getElementById('BGSOUND_ID').play();
}
function setv() {
    var hr2    = document.getElementById('hour2').value;
    var min2   = document.getElementById('min2').value;
    var sec2   = document.getElementById('sec2').value;
    if(hr2<10)
        hr2='0'+hr2;
    if(min2<10)
        min2='0'+min2;
    if(sec2<10)
        sec2='0'+sec2;
    document.getElementById('d2').value=hr2+'*'+min2+'*'+sec2;
    set=1;
    document.getElementById('msg').innerHTML='Alarm is ON';
}
function dis() {
    var dat= new Date();
    var hr=dat.getHours();
    var min=dat.getMinutes();
    var sec=dat.getSeconds();
    if(hr<10)
        hr='0'+hr;
    if(min<10)
        min='0'+min;
    if(sec<10)
        sec='0'+sec;
    document.getElementById('hour').value=hr;
    document.getElementById('min').value=min;
    document.getElementById('sec').value=sec; 
    var dat2v=document.getElementById('d2').value;
    var dats =hr+'*'+min+'*'+sec;
    if(dat2v==dats && set) {
        play();
        var x = confirm("Snooze?");
        if(x) {
            document.getElementById('BGSOUND_ID').pause();
            audio.currentTime=0;
        }
        document.getElementById('msg').innerHTML='Alarm is OFF';
        set=0;
    }
    setTimeout("dis()",500);
}
function prtsel(x) {
    for(var i=0;i<x;i++)
    document.write("<option value="+i+">"+i+"</option>");
}
</script>
</head>
<body>
<table align=center width=45%>
<tr><td>
<body onload=dis()>
<audio id="BGSOUND_ID" src="http://hopto.redirectme.net/Audio/Alarm%20Beeps.mp3/" LOOP=1>
</audio>
<input type=hidden id=d2 name=d2>
<input type=text id=hour name=hour size=1 class=time> :
<input type=text id=min name=min size=1 class=time> :
<input type=text id=sec name=sec size=1 class=time>
<br/>
<select id=hour2 name=hour2 onChange="setv()">
<script type='text/javascript'>prtsel(25);</script>
</select>
<select id=min2 name=min2 onChange="setv()">
<script type='text/javascript'>prtsel(61);</script>
</select>
<select id=sec2 name=sec2 onChange="setv()">
<script type='text/javascript'>prtsel(61);</script>
</select>
<div id=msg>Alarm is OFF</div>
</body>
</td></tr></table>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

问题是音频标签的来源。网址应遵循以下格式:protocol://host/path。您的音频源以斜线结尾,表示子目录。如果您要查看浏览器的网络选项卡,您会看到一个失败的请求。 音频标签源的标记也(在我看来)格式不正确。 它应该如下所示:

<audio controls>
  <source src="http://hopto.redirectme.net/Audio/Alarm%20Beeps.mp3" type="audio/mpeg">
  Your browser does not support this audio format.
</audio>

这允许您指定多个来源,因此让浏览器决定它想要播放的内容,具体取决于它最支持的内容......

此外,变量audio正在求值为null,因为代码执行时尚未呈现音频元素。因此,您可以将脚本移至HTML标记之后,或仅在加载正文时在dis()函数中设置变量。

祝你好运!