播放声音的图片onclick [英] Image to play sound onclick
本文介绍了播放声音的图片onclick的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我单击图像时，我正在尝试播放歌曲.每次我使用此处的解决方案进行操作时，要么图像不显示，音频不播放，要么两者都显示.我不明白我的问题是什么，可以使用任何帮助.
I'm trying to make a song play when I click on an image. everytime I do it using the solutions on the here Either the image doesn't show, the audio doesn't play, or both. I don't understand what my issue is and could use any help.
我的HTML`
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<title>#F7D64B</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css"
href="https://csshake.surge.sh/csshake.min.css">
</head>
<body>
<script>
var audio = new Audio('Music/song.wav');
function myAudioFunction
<script>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<a onclick="document.getElementById("audio").play();">
<img src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</a>
</center>
</body>
<footer>
<!-- art by @woun404-->
<!-- #F7D64B -->
</footer>
</html>`
推荐答案
仅使用JavaScript看起来像这样:
Using JavaScript only would look like this:
<body>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<img id="img" src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</center>
<script>
document.getElementById("img").addEventListener("click", function(){
document.getElementById("audio").play();
});
<script>
</body>
建议将JavaScript用于大型项目，因为它的运行速度更快.
It is advised to use JavaScript for big projects since it works way faster.
这篇关于播放声音的图片onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
