スイッチをクリックしてスイッチを切り替えると、別のsvgイメージに切り替えることができます。これをクリックすると元の状態に戻ります（同じホバー効果）。クリックすると、ソースオーディオファイルを再生/一時停止する必要があります。オーディオ再生ポーズトグルボタン
body {
background: black;
}<script async src="//jsfiddle.net/jbwhr7n9/1/embed/js,html,css,result/dark/"></script>jQueryを追加して、オーディオの再生と一時停止、ボタンの非表示と表示を追加しました。
$('#play').click(function() {
$('#audio-file').trigger('play');
$(this).hide();
$('#pause').show();
});
$('#pause').click(function() {
$('#audio-file').trigger('pause');
$(this).hide();
$('#play').show();
});body {
background: #242626
}
.blockA {
border: 6px solid #181919;
background: #181919;
}
.blockB {
border: 6px solid #2c3030;
background: #2c3030;
display: inline-block;
margin: 8px 8px 8px 8px;
}
.blockC {
border: 6px solid #242626;
background: #242626;
}
.titleHover {
border: 4px solid transparent;
width: 200px;
height: 301px;
display: block;
}
.titleHover > img {
max-width: 100%;
height: 100%;
}
.titleHover:hover {
border-color: #49bdba;
}
a:link {
color: #49bdba;
background: transparent;
}
a:visited {
color: #49bdba;
}
a:hover {
color: #49bdba;
background: transparent;
}
a:active {
}
.sBC {
display: inline-block;
cursor: pointer;
}
.sBB1, .sBB2, .sBB3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .sBB1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .sBB2 {
opacity: 0;
}
/* Rotate last bar */
.change .sBB3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
ul {
background-color: #181919;
list-style-type: none;
margin: 0;
padding: 1;
}
.btn-secondary {
color: #fff;
background-color: #242626;
border-color: #242626;
}
.btn-secondary:focus {
box-shadow: 0 0 0 3px rgba(0,0,0,0);
}
.blockD {
display: inline-block;
}
.bottom-bar {
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
}
.mbuttonhover {
fill: #49bdba;
cursor: pointer;
}
.mbuttonhover:hover {
fill: rgb(36,100,98);
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<audio src="https://d3cj65qhk7sagp.cloudfront.net/tracks/Beacon/Faux+Tales+-+Beacon.mp3" id="audio-file"></audio>
<div class="blockA">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 150 150" width="10%" height="10%" class="mbuttonhover active" id="play"><defs><clipPath id="_clipPath_yKzkJPlSAzMkZT8ai7ySqD3TM8Th7XOR"><rect width="100%" height="100%"/></clipPath></defs><g clip-path="url(#_clipPath_yKzkJPlSAzMkZT8ai7ySqD3TM8Th7XOR)"><path class="expand" d=" M 130.884 81.689 L 78.986 111.95 L 27.087 142.212 C 19.761 146.484 13.804 143.067 13.794 134.586 L 13.722 75.049 L 13.65 15.513 C 13.64 7.032 19.626 3.535 27.008 7.709 L 78.895 37.047 L 130.783 66.386 C 138.165 70.56 138.211 77.417 130.884 81.689 Z "/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate; display: none;" viewBox="0 0 150 150" width="10%" height="10%" class="mbuttonhover" id="pause"><defs><clipPath id="_clipPath_r5GZgsezpi491ktbWcAvoJzmMQuyG3g9"><rect width="150" height="150"/></clipPath></defs><g clip-path="url(#_clipPath_r5GZgsezpi491ktbWcAvoJzmMQuyG3g9)"><path d=" M 20.76 15 L 57.24 15 C 60.419 15 63 17.581 63 20.76 L 63 129.24 C 63 132.419 60.419 135 57.24 135 L 20.76 135 C 17.581 135 15 132.419 15 129.24 L 15 20.76 C 15 17.581 17.581 15 20.76 15 Z M 92.76 15 L 129.24 15 C 132.419 15 135 17.581 135 20.76 L 135 129.24 C 135 132.419 132.419 135 129.24 135 L 92.76 135 C 89.581 135 87 132.419 87 129.24 L 87 20.76 C 87 17.581 89.581 15 92.76 15 Z "/></g></svg>
</div>
</div>
</body>これは完璧です！ –
私はあなたがボタン画像を切り替えるためにはJavaScriptが必要になりますね。 –