0
私はこのボタンを別の背景に変更しようとしています。その背景には「線形勾配」があります。それはオーディオ再生ボタンです。ボタンを別の背景に変更するonClick
あなたはそれを押して、それを続けます、あなたが消えたら再び押します。あなたはそれが
（透明にリニアをクリックした後、あなたが最初に何を参照してください
（のみの直線勾配の背景、その背後にあるなしの画像）
一時停止クラスを=参照何
初期クラス =あなたがもう一度それをクリックした後、あなたが見る何その背後にある画像）
プレイクラス =とグラデーション背景、あなたが後に表示何
一時停止クラス = 210 （その背後にある画像と透明な線形グラデーションの背景には、）
（その背後にある画像を、透明な線形グラデーション背景）それは
をクリックしてくださいsvgボタンは、初期から一時停止、再生、一時停止、再生の順に変化しますが、透過直線性背景は、初期クラス背景から変更されません。
誰かがこのコードを正しく働かせるように手伝ってもらえますか？私はすべてを試してきましたが、それを動かすことができませんでした。これはオン/オフが切り替わりますが、バックグラウンド画像のある線形の背景クラス（一時停止、再生）は、の背景をクリックすると表示されません。初期のクラスのバックグラウンドのままです。これが問題です。
私は、このコードをどこか2回置くことができる必要があると言いました。これは、透過線形グラデーションバックグラウンドの背後にある背景画像です。最初のクラスはイメージを取得せず、2番目のクラスのみを再生し、一時停止します。このは現在フルコードで現在ではありません。私はどこに配置するのか把握しようとしています。
, url('http://via.placeholder.com/266x266');
これは、（初期、一時停止、再生）ボタンがボタンコードとは別に設定される方法です。初期
https://jsfiddle.net/k9qscyda/4/
：
<svg class="initial" style=" border: 3px solid #0059dd;padding:76px 85px 76px 85px;cursor: pointer;background-image: linear-gradient(to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px);"
width="90" height="108" viewBox="0 -3 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " 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>
一時停止：
<svg class="pause" style="border: 3px solid #e77d19; padding:94px 100px 94px 100px;cursor: pointer;background: linear-gradient(to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px), url('http://via.placeholder.com/266x266');"
width="60" height="72" viewBox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
プレイ：
<svg class="play" style="border: 3px solid #e77d19;padding:94px 100px 94px 100px;cursor: pointer;background: linear-gradient(to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px), url('http://via.placeholder.com/266x266');http://via.placeholder.com/150x150"
width="60" height="72" viewBox="0 0 16 14">
<path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
完全なコードは、これはそれが動作する順序です
https://jsfiddle.net/31exzq4y/5/
以下の通りです。
クラス= "初期"
クラス= "一時停止"
クラスは=を "再生します" 
コード：
<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-image: linear-gradient(to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px); border: 3px solid #0059dd;"
onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
playButton2.style.background = 'background: linear-gradient(to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px)';
playButton2.style.padding = '94px 100px 94px 100px';
playButton2.style.cursor = 'pointer';
playButton2.style.border='3px solid #e77d19';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
playButton2.style.background = 'background: linear-gradient(to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px)';
playButton2.style.border='3px solid #e77d19';
playButton2.style.padding = '94px 100px 94px 100px';
playButton2.style.cursor = 'pointer';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">
<svg class="pause" style="display: none;" width="60" height="72" viewBox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<svg class="play" style="display: none;" width="60" height="72" viewBox="0 0 16 14">
<path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<svg class="initial" width="90" height="108" viewBox="0 -3 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " 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>
</button>
<audio id="player2" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
**警告：**クリックする前にスピーカーをオフにしてください!!! – mplungjan
@mplungjan私はこれをあまりにも遅く読んだ！私を怖がってくれました – Granny