JavaScript闹钟无法播放声音

时间:2017-06-20 03:39:07

标签: javascript

所以我正在尝试用简单的HTML和JavaScript构建一个时钟,但我已经停止了。我有时钟,可以选择我的闹钟时间,但声音永远不会消失。

function alarmOn() {
  if (alarmTime = startTime()) {
    var audio = new Audio('school-bell.mp3');
    audio.play();

https://webpage-jbedford23.c9users.io/NewClock.html

如果您需要访问完整代码。我知道这是否有用。

2 个答案:

答案 0 :(得分:0)

var today= new Date();
var alarmTime = "nothing";
var toCompare = "nothing";
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    toCompare = h + ":" + m;
    if (String(alarmTime) === String(toCompare)) {
      //new Audio('./school-bell.mp3').play()
      var audio = new Audio('school-bell.mp3');
      audio.play();
      console.log("Comparison passed");

    }
    var t = setTimeout(startTime, 1000);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

// curTime = (checkTime(today.getHours()) + ":" + checkTime(today.getMinutes()));
// var fresh = setTimeout(curTime, 1000);

function alarmSet() {
  hourNum = document.getElementById("hour");
  hValue = hourNum.options[hourNum.selectedIndex].value;
  minNum = document.getElementById("mins");
  mValue = minNum.options[minNum.selectedIndex].value;
  alarmTime = hValue + ":" + mValue;
  
}
function alarmOn() {
	console.log("alarmTime = " + alarmTime + " | " + "toCompare = " + toCompare);
  if (String(alarmTime) === String(toCompare)) {
    //new Audio('./school-bell.mp3').play()
    var audio = new Audio('school-bell.mp3');
    audio.play();
    console.log("Comparison passed");
    
  }
}
function alarmOff() {
  document.all.sound.src = "";
  alarmTime="";
}
#txt {
    height: 100px;
    width: 800px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    padding-top: 70px;
    font-family: courier, monospace;
    text-align: center;
    color: white;
    font-size: 100px;
<body onload="startTime()" style="background-color: black" >

<div id="txt"style="color:#00ff00" align=center ></div>
	<table width=50% border=1 style="color:white">
<tr>
<td align=middle style="color:white">
<input type=radio name=alarmOnOff onClick="alarmOn()">On
<input type=radio name=alarmOnOff onClick="alarmOff()" checked>Off
<td align=middle>
Set Alarm:
<br>
<select id=hour name=hourOpt onChange="alarmSet()" size=1> //Opti
<option value="00">00<option value="01">01<option value="02">02<option value="03">03
<option value="04">04<option value="05">05<option value="06">06<option value="07">07
<option value="08">08<option value="09">09<option value="10">10<option value="11">11
<option selected value="12">12
<option value="13">13<option value="14">14<option value="15">15<option value="16">16
<option value="17">17<option value="18">18<option value="19">19<option value="20">20
<option value="21">21<option value="22">22<option value="23">23
</option>
</select>
<select id=mins name=minOpt onChange="alarmSet()" size=1>
<option selected value="00">00<option value="01">01<option value="02">02<option value="03">03
<option value="04">04<option value="05">05<option value="06">06<option value="07">07
<option value="08">08<option value="09">09<option value="10">10<option value="11">11
<option value="12">12<option value="13">13<option value="14">14<option value="15">15
<option value="16">16<option value="17">17<option value="18">18<option value="19">19
<option value="20">20<option value="21">21<option value="22">22<option value="23">23
<option value="24">24<option value="25">25<option value="26">26<option value="27">27
<option value="28">28<option value="29">29<option value="30">30<option value="31">31
<option value="32">32<option value="33">33<option value="34">34<option value="35">35
<option value="36">36<option value="37">37<option value="38">38<option value="39">39
<option value="40">40<option value="41">41<option value="42">42<option value="43">43
<option value="44">44<option value="45">45<option value="46">46<option value="47">47
<option value="48">48<option value="49">49<option value="50">50<option value="51">51
<option value="52">52<option value="53">53<option value="54">54<option value="55">55
<option value="56">56<option value="57">57<option value="58">58<option value="59">59
</option>
</select>
</form>
</td>
</tr>
</table>

<div id="txt"style="color:#00ff00" align=center ></div>

</body>

我认为这个错误可能与你比较alarmTime和statTime的方式有关。在Javascript中,比较运算符是这样的:

===
==
!==
!=

因此,如果您的时间是相同的格式,请更改:

if (alarmTime = startTime()) {

要:

if (alarmTime === startTime()) {

或:

if (alarmTime == startTime()) {

有关比较运算符的更多信息,请查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators?v=control

希望这有帮助,

编辑:

if (alarmTime = startTime())

如上所述,比较运算符是错误的,除此之外,您正在将变量与不返回任何内容的函数进行比较:

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 1000);
}

您可以创建一个以字符串格式存储当前时间的变量,因为您的alarmTime是这样创建的:

alarmTime = hValue + ":" + mValue;

这样你就可以进行有意义的比较。

答案 1 :(得分:-1)

这就是我在android studio上会做的事情。

尝试使用MediaPlayer,它有很多选择。

MediaPlayer mediaPlayer = new MediaPlayer();
mediaPlayer.setDataSource(context, ringtone);
mediaPlayer.setAudioStreamType(AudioManager.STREAM_ALARM);
mediaPlayer.setLooping(true);
mediaPlayer.prepare();
mediaPlayer.start();