HTML音频在按下特定键时播放问题

huangapple
go评论90阅读模式
英文:

HTML audio playing issues when specific key is pressed

问题

I'm trying to make this audio play when a specific key is pressed and will continue to loop. Any ideas on how to make this work?

  1. document.addEventListener("keypress", function(event) {
  2.   if (event.keyCode == 13) {
  3.     <audio controls loop>
  4.       <source src="Chiptronical.ogg" type="audio/ogg">
  5.     </audio>
  6.   }
  7. });

I wanted it to play the audio when the key is pressed, but it just doesn't work.

英文:

Im trying to make this audio play when a specific key is pressed and will continue to loop. Any ideas on how to make this work?

  1. document.addEventListener(&quot;keypress&quot;, function(event) {
  2.   if (event.keyCode == 13) {
  3. &lt;audio controls loop&gt;
  4.     &lt;source src=&quot;Chiptronical.ogg&quot; type=&quot;audio/ogg&quot;&gt;
  5.     &lt;/audio&gt;
  6.   }
  7. });

i wanted it to play the audio when the key is pressed but it just doesnt work

答案1

得分: 0

以下是您提供的HTML代码的翻译部分：

  1. 尝试在浏览器上运行这个代码，并按回车键。
  2. 确保目录与音频文件相同。
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7.     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  8.     <script>
  9.     $(document).ready(function(){
  10.     
  11.     document.addEventListener("keypress", function(event) {
  12.   if (event.keyCode == 13) {
  13.     
  14.     	$('body').append( '<audio controls autoplay>' +
  15.   '<source src="Chiptronical.ogg" type="audio/ogg">' +
  16.   '<source src="Chiptronical.mp3" type="audio/mpeg">' +
  17.   'Your browser does not support the audio element.' +
  18. '</audio>' );
  19.  }
  20. });
  23.     });
  24.     </script>
  25. </head>
  27. <body>
  29. <h1>音频自动播放属性</h1>
  31. <p>按回车键播放声音：</p>
  33. </body>
  34. </html>

请注意，这是您提供的HTML代码的翻译部分，其中包含HTML标记和JavaScript代码。

英文:

try this and run on browser. and press enter.
make sure directory is same with audio file

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4.     &lt;script src=&quot;https://code.jquery.com/jquery-1.12.4.js&quot;&gt;&lt;/script&gt;
  5.     &lt;script&gt;
  6.     $(document).ready(function(){
  7.     
  8.     document.addEventListener(&quot;keypress&quot;, function(event) {
  9.   if (event.keyCode == 13) {
  10.     
  11.     	$(&#39;body&#39;).append( `&lt;audio controls autoplay&gt;
  12.   &lt;source src=&quot;Chiptronical.ogg&quot; type=&quot;audio/ogg&quot;&gt;
  13.   &lt;source src=&quot;Chiptronical.mp3&quot; type=&quot;audio/mpeg&quot;&gt;
  14.   Your browser does not support the audio element.
  15. &lt;/audio&gt;` );
  16.  }
  17. });
  20.     });
  21.     &lt;/script&gt;
  22. &lt;/head&gt;
  24. &lt;body&gt;
  26. &lt;h1&gt;The audio autoplay attribute&lt;/h1&gt;
  28. &lt;p&gt;Press Enter to play a sound:&lt;/p&gt;
  30. &lt;/body&gt;
  31. &lt;/html&gt;

答案2

得分: 0

以下是翻译好的部分：

你可以像这样实现所需的结果：-

这是HTML代码：-

  1. <audio id="audioElement" controls loop>
  2.     <source src="Chiptronical.ogg" type="audio/ogg">
  3. </audio>

这是JavaScript代码：-

  1. const audioElement = document.querySelector('#audioElement');
  2. document.addEventListener("keypress", function(event) {
  3.   if (event.keyCode == 13) {
  4.       // 播放
  5.       audioElement.play();
  6.       // 暂停
  7.       audioElement.pause();
  8.   }
  9. });
英文:

You can achieve the desired results like this:-

Here is the html:-

  1. &lt;audio id=&quot;audioElement&quot; controls loop&gt;
  2.     &lt;source src=&quot;Chiptronical.ogg&quot; type=&quot;audio/ogg&quot;&gt;
  3. &lt;/audio&gt;

Here is the JavaScript:-

  1. const audioElement = document.querySelector(&#39;#audioElement&#39;);
  2. document.addEventListener(&quot;keypress&quot;, function(event) {
  3.   if (event.keyCode == 13) {
  4.       // For Play
  5.       audioElement.play();
  6.       // For Pause
  7.       audioElement.pause();
  9.   }
  10. });

huangapple
  • 本文由 发表于 2023年5月11日 18:10:31
  • 转载请务必保留本文链接：https://go.coder-hub.com/76226478.html
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定