Question

当我点击图片时，我正在尝试播放一首歌。我每次都使用这里的解决方案。图像不显示，音频不播放，或两者兼而有之。我不明白我的问题是什么，可以使用任何帮助。

我的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>`

Answer 1

仅使用JavaScript将如下所示：

<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，因为它的工作速度更快。

Answer 2

这是一个有效的例子：

<audio id="audio" src="http://www.soundboard.com/handler/DownLoadTrack.ashx?cliptitle=Never+Gonna+Give+You+Up-+Original&filename=mz/Mzg1ODMxNTIzMzg1ODM3_JzthsfvUY24.MP3"></audio>

<a href="#" id="play">
    <img src="assets/a.png" width=550 height=550 class="shake-slow shake-    
constant">
</a>

{{1}}

图片播放声音onclick

2 个答案: