单击播放按钮后开始播放音频

Question

如果我不希望音频在您单击后开始播放，我将如何更改代码。 如果我要显示播放按钮，而不是暂停播放，直到您单击播放按钮而不是图片，才播放音频？

单击图像后的外观。 它直接进入音频。 我希望它先转到播放按钮。

https://jsfiddle.net/7ux1s23j/42/

单击图片后，我希望它首先转到该图像。

屏幕截图

 <style> .playButton { width: 266px; height: 174px; } .initial { width: 260px; height: 168px; cursor: pointer; background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg"); border: 3px solid #0059dd; font-family: Tahoma; font-weight: bold; font-size: 30px; color: #0059dd; cursor: pointer; line-height: 100px; text-align: center; } .playButton.playing { width: 50px; height: 50px; border: none; cursor: pointer; background-color: #000000; margin: -112px 0 0 108px; fill: #aaff00; } .links div { margin: 0 0 12px 0; } .links a { display: block; width: 50px; height: 50px; background-color: green; margin: -50px 0 0; transition: 0.5s ease-in-out; } a.x1 { margin: 0; } a.x2 { margin-left: 54px; } a.x3 { margin-left: 108px; } a.x4 { margin-left: 162px; } a.x5 { margin-left: 216px; } .links a:hover, .links a:active, .links a:focus { background: blue; } .scrl a:visited { background: orange; color: #000000; } .scrl a:hover { background: red; } .hide { display: none; } .links div:last-child { margin-bottom: 0; } </style> <div class="myLinkDiv"> <div class="links"> <div> <a class="x1" href="" target="_blank"></a> <a class="x2" href="" target="_blank"></a> <a class="x3" href="" target="_blank"></a> <a class="x4" href="" target="_blank"></a> <a class="x5" href="" target="_blank"></a> </div> <div> <a class="x1" href="" target="_blank"></a> <a class="x2" href="" target="_blank"></a> <a class="x4" href="" target="_blank"></a> <a class="x5" href="" target="_blank"></a> </div> <div> <a class="x1" href="" target="_blank"></a> <a class="x2" href="" target="_blank"></a> <a class="x3" href="" target="_blank"></a> <a class="x4" href="" target="_blank"></a> <a class="x5" href="" target="_blank"></a> </div> </div> </div> <div class="playButton"> <div class="initial ">Links</div> <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100"> <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path> </svg> <svg class="play hide " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100"> <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path> </svg> </div> <audio id="player" preload="none"> <source src="http://hi5.1980s.fm/;" type="audio/mpeg"> </source> </audio> <script> (function iife() { "use strict"; document.querySelector(".myLinkDiv").classList.add("hide"); function playButtonClickHandler() { document.querySelector(".myLinkDiv").classList.remove("hide"); var button = document.querySelector(".playButton"); var player = document.querySelector("#player"); document.querySelector('.playButton .initial').style.display = 'none'; player.volume = 1.0; if (player.paused) { button.classList.add("playing"); document.querySelector(".playButton .play").style.display = "none"; document.querySelector(".playButton .pause").style.display = "inline-block"; player.play(); } else { document.querySelector(".playButton .play").style.display = "inline-block"; document.querySelector(".playButton .pause").style.display = "none"; player.pause(); } } var playButton = document.querySelector(".playButton"); playButton.addEventListener("click", playButtonClickHandler); }()); </script> 

Answer 1

尝试如下

 //music var audio = new Audio('http://www.sousound.com/music/healing/healing_01.mp3') checksound(); function checksound() { var myElement = document.getElementById("soundMenu"); myElement.innerHTML = "Turn Sound " + (audio.paused ? "OFF" : "ON"); if (audio.paused) { audio.play(); } else { audio.pause(); } } 

 <button id="soundMenu" onclick="checksound()">Play</button>