asp.net 点击按钮时播放蜂鸣声

os8fio9y  于 12个月前  发布在  .NET
关注(0)|答案(7)|浏览(105)

好吧,我在这里读了几个答案,但它们对我一点帮助都没有(事实上,它们都没有被接受为答案)
问题是如何在**“按钮单击”“播放蜂鸣声”**
我正试图使一个网站,在触摸屏设备上工作,所以我希望每个按钮点击事件将播放蜂鸣声,这应该是谁使用该网站的用户更好。Beep sound文件在这里:http://www.soundjay.com/button/beep-07.wav。我只需要在谷歌Chrome这项工作(支持HTML5)
我知道这需要在客户端工作,所以我尝试了这个:
JavaScript语言:

<script>
    function PlaySound(soundObj) {
        var sound = document.getElementById(soundObj);
        sound.Play();
    }
</script>

HTML

<embed src="/beep.wav" autostart="false" type="audio/mpeg" loop="false" width="0" height="0" id="beep" enablejavascript="true" />
<asp:LinkButton ID="lbtnExit" runat="server" OnClick="lbtnExit_Click" OnClientClick="PlaySound('beep')" CssClass="btn btn-lg btn-danger" Text="Exit <i class='fa fa-sign-out' style='font-size: 40px'></i>"></asp:LinkButton>

但它不工作,什么也没发生,当我点击按钮。

ijxebb2r

ijxebb2r1#

你可以使用这样的音频标签:

<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autoplay="false" ></audio>
    <a onclick="playSound();"> Play</a>
    <script>
    function playSound() {
          var sound = document.getElementById("audio");
          sound.play();
      }
    </script>

这是一个Plunker

yv5phkfx

yv5phkfx2#

承认你已经在你的html中有了类似<div id='btn'>Click to play!</div>的东西,你可以这么简单地做:

$('#btn').click( () => new Audio('mp3/audio.mp3').play() );

这是最好的解决方案海事组织,因为它允许点击多次快速按钮没有问题(这是不可能的,在其他答案的时间),是一个班轮。

const audioUrl = 'https://freewavesamples.com/files/Ensoniq-ESQ-1-Piano-C3.wav'

$('.btn').click( () => new Audio(audioUrl).play() ); // that will do the trick !!
body {padding: 16px;}

.btn {
  background: tomato;
  padding:15px;
  border-radius:5px;
  color:#fff;
  cursor: pointer;
  box-shadow: 0 -3px rgba(0,0,0,0.15) inset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class='btn'>Click to play!</span>

codepen示例

4ioopgfo

4ioopgfo3#

这工程罚款

function playSound () {
    document.getElementById('play').play();
}
<audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio>

<button onclick="playSound()">Play</button>
9w11ddsr

9w11ddsr4#

从技术上讲,下面的代码并没有回答关于“播放”哔哔声的问题,但是如果问如何“生成”哔哔声,那么考虑一下我在this website上找到的以下代码:

a=new AudioContext();
function beep(vol, freq, duration){
  v=a.createOscillator();
  u=a.createGain();
  v.connect(u);
  v.frequency.value=freq;
  v.type="square";
  u.connect(a.destination);
  u.gain.value=vol*0.01;
  v.start(a.currentTime);
  v.stop(a.currentTime+duration*0.001);
}

调用的示例值:beep(20, 100, 30) .上述网站包括更多细节和声音样本。
声音可以是对按钮点击的响应,也可以是随意通过编程生成的。我在Chrome中使用过它,但没有在其他浏览器中尝试过。

niwlg2el

niwlg2el5#

使用原始JavaScript,您可以简单地调用:

new Audio('sound.wav').play()
zy1mlcev

zy1mlcev6#

一直让我抓狂,但有了jQuery,我找到了解决方案。这不是最好的方法,但对我来说很有效。

function ding() {
      $("body").append('<embed src="/ding.mp3" autostart=false autoplay=false type="audio/mpeg" loop="false" width="0" height="0" id="beep" enablejavascript="true" />');
      setTimeout(function(){ $("#beep").remove(); },2000);
}

我不确定有多少embed标签是真正需要的,但一旦它开始工作,我就停止了写作(embed从另一个解决方案复制)。
希望这能帮助别人(或者下次我忘记的时候帮助我)

ozxc1zmp

ozxc1zmp7#

扩展Alan M.的答案,这将防止由于没有用户事件而无法运行时的控制台错误

var actx = false;
function beep(vol, freq, duration){
    try{
        if(!actx) actx = new AudioContext();
        v=actx.createOscillator();
        u=actx.createGain();
        v.connect(u);
        v.frequency.value=freq;
        u.connect(actx.destination);
        u.gain.value=vol*0.01;
        v.start(actx.currentTime);
        v.stop(actx.currentTime+duration*0.001);
    }catch{
        // ignore
    }
}

相关问题