Question

html代码：

<button id="reload" onClick="refresh()">Reload</button>
<script>
function refresh(){
 location.reload() ? location.reload(): location = location;
}
</script>

Javascript：

Status = IF(Table2[Deleted]="Yes",IF(Table2[Blocked]="Yes","Blocked","Deleted"),"Active")

第一个是按钮，其余的是锚标记。因为我不确定它会起作用。如果它不能与锚点一起使用，那对我来说还可以，但是也不能与按钮一起使用。

我还使用了带有按钮标签的<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <audio id="sounds" loop= "false" volume = "60"> <source src="sounds/clap.wav" id="A" type="audio/wav"> <source src="sounds/boom.wav" id="S" type="audio/wav"> <source src="sounds/hihat.wav" id="D" type="audio/wav"> <source src="sounds/kick.wav" id="F" type="audio/wav"> <source src="sounds/snare.wav" id="G" type="audio/wav"> <source src="sounds/ride.wav" id="H" type="audio/wav"> <source src="sounds/tom.wav" id="J" type="audio/wav"> </audio> <div class="keys"> <div class="key"> <button id="common1" class="key_link" type="submit">CLAP</button> </div> <div class="key"> <a href="#" id="common2" type="button" class="key_link">BOOM</a> </div> <div class="key"> <a href="#" id="common3" class="key_link">HIHAT</a> </div> <div class="key"> <a href="#" id="common4" type="submit" class="key_link">KICK</a> </div> <div class="key"> <a href="#" id="common5" type="submit" class="key_link">SNARE</a> </div> <div class="key"> <a href="#" id="common6" type="submit" class="key_link">RIDE</a> </div> <div class="key"> <a href="#" id="common7" type="submit" class="key_link">TOM</a> </div> </div> <script src="script.js"></script> </body> </html>。但这也不起作用。然后我在某处读到，使用事件侦听器是更好的做法。因此，我正在尝试通过事件侦听器来实现它。

Answer 1

不需要包含音频标签。相反，您只能在javascript中说出您想播放的音频。

function myPlay(){
    var audio = new Audio("sample.mp3");
    audio.play();
}

执行此功能时，将播放音频。

Answer 2

<source> html标签的目的不是指向不同的音频内容，而是指向具有不同格式的相同音频内容，以便浏览器可以选择哪种格式更合适。

所以你应该有这样的东西：

<audio id="clap" loop= "false" volume = "60">
    <source src="sounds/clap.wav" id="A" type="audio/wav">
</audio>
<audio id="boom" loop= "false" volume = "60">
    <source src="sounds/boom.wav" id="S" type="audio/wav">
</audio>
...

如果您想为同一声音提供不同的格式，则可能会出现以下情况：

<audio id="clap" loop= "false" volume = "60">
    <source src="clap.mp3" type="audio/mpeg">
    <source src="clap.wav" type="audio/wav">
</audio>

您应该这样做：

var clap = document.getElementById("clap");
clap.play();

请注意，它是您可以调用的<audio>而不是play()的{{1}} html标记。

Answer 3

您用document.getElementById弄错了元素。音频标签的ID为sounds，但您尝试使用ID A来获取它。

更改

function myPlay() {
var a = document.getElementById('A');
a.play();
};

收件人

function myPlay() {
var a = document.getElementById('sounds');
a.play();
}

Answer 4

尝试以下示例，https://jsfiddle.net/nerdvoso/46f7rxbs/1/

以下代码：

var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');

var playSound = function() {
    audio.play();
};

playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function(){audio.pause()}, false);

<audio id="audio" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio>
<button id="play">Play</button>
<button id="stop">Stop</button>

更新https://jsfiddle.net/nerdvoso/46f7rxbs/33/

var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');
var nextBtn = document.getElementById('next');
var prevBtn = document.getElementById('prev');

var soundSelected = document.getElementById("audio1");

var playSound = function() {soundSelected.play();};

var stopSound = function() {soundSelected.pause();};

var nextSound = function() {
  if(soundSelected.nextElementSibling){
    soundSelected.pause();
    soundSelected.currentTime = 0;
    soundSelected = soundSelected.nextElementSibling;
  }
};


var prevSound = function() {
  if(soundSelected.previousElementSibling){
    soundSelected.pause();
    soundSelected.currentTime = 0;
    soundSelected = soundSelected.previousElementSibling;
  }
};

playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', stopSound, false);
nextBtn.addEventListener('click', nextSound, false);
prevBtn.addEventListener('click', prevSound, false);

<div id="playList">
    <audio id="audio1" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio>
    <audio id="audio2" src="https://freewavesamples.com/files/Yamaha-V50-Metalimba-C2.wav" preload="auto"></audio>
</div>
<button id="prev">Prev</button>
<button id="play">Play</button>
<button id="stop">Stop</button>
<button id="next">Next</button>

通过专用按钮enter link description here

播放声音

var playSoundBtn = document.getElementsByClassName("playSound");

var playSound = function() {
    var attribute = this.getAttribute("data-sound");
    var sounds = document.getElementsByTagName('audio');
    for(i=0; i<sounds.length; i++){
        sounds[i].pause();
        sounds[i].currentTime = 0;
    }
    document.getElementById(attribute).play();
};

for (var i = 0; i < playSoundBtn.length; i++) {
    playSoundBtn[i].addEventListener('click', playSound, false);
}

<audio id="audio1" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio>
<audio id="audio2" src="https://freewavesamples.com/files/Yamaha-V50-Metalimba-C2.wav" preload="auto"></audio>
<hr>
<button class="playSound" data-sound="audio1">Sound 1</button>
<button class="playSound" data-sound="audio2">Sound 2</button>

使用纯JavaScript在Click事件上播放声音

4 个答案: