使用html图像映射播放音频而无需进入新网页

Question

我正在制作一个图像地图，该图像地图上的每个按钮都使用游戏音效。然而每次我按下图像地图位置来播放音效时，总是会导致我转到另一个网页来播放音效。

<!DOCTYPE HTML>
<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>Jukebox Web Site</title>
</head>
<body>
<center>

<map name="image-map">
<img src="jukebox.png" usemap="#image-map">
    <area target="" alt="" title="1up" href="1up.mp3" coords="169,197,192,219" shape="rect">
    <area target="" alt="" title="Brick" href="brick.mp3" coords="199,199,222,221" shape="rect">
    <area target="" alt="" title="Coin" href="coin.mp3" coords="229,198,253,220" shape="rect">
    <area target="" alt="" title="flagpole" href="flagpole.mp3" coords="259,197,283,220" shape="rect">
    <area target="" alt="" title="gameover" href="gameover.mp3" coords="290,197,313,218" shape="rect">
    <area target="" alt="" title="kick" href="kick.mp3" coords="320,197,344,219" shape="rect">
</map>
</body>
</html>

Answer 1

在新的音频对象中放置音频的链接或文件的路径

<!DOCTYPE HTML>
<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>Jukebox Web Site</title>
</head>
<body>
<center>

<map name="image-map">
<img src="https://i.stack.imgur.com/wY3Gu.png" usemap="#image-map">
    <area target="" alt="" title="1up" onclick="new Audio('1up.mp3').play()" coords="169,197,192,219" shape="rect">
    <area target="" alt="" title="Brick" onclick="new Audio('brick.mp3').play()" coords="199,199,222,221" shape="rect">
    <area target="" alt="" title="Coin" onclick="new Audio('coin.mp3').play()" coords="229,198,253,220" shape="rect">
    <area target="" alt="" title="flagpole" onclick="new Audio('flagpole.mp3').play()" coords="259,197,283,220" shape="rect">
    <area target="" alt="" title="gameover" onclick="new Audio('gameover.mp3').play()" coords="290,197,313,218" shape="rect">
    <area target="" alt="" title="kick" onclick="new Audio('kick.mp3').play()" coords="320,197,344,219" shape="rect">
</map>
</body>
</html>

使用html图像映射播放音频而无需进入新网页

问题描述投票：0回答：1

1个回答

最新问题

使用html图像映射播放音频而无需进入新网页

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1