Audio Play Pause Toggle Button

-1

Wie haben Sie ein Svg-Bild, das die Farbe leicht verändert, wenn es überlagert wird und wenn es angeklickt wird, wechselt zu einem anderen Svg-Bild, das durch erneutes Klicken wieder auf das Original zurückgeschaltet werden kann (gleicher Hover-Effekt). Wenn Sie darauf klicken, sollte eine Quell-Audiodatei abgespielt werden.Audio Play Pause Toggle Button

body { 
 
    background: black; 
 
}

<script async src="//jsfiddle.net/jbwhr7n9/1/embed/js,html,css,result/dark/"></script>

Dies ist, was ich bisher habe, ich habe überall gesucht, wie dies zu tun und kann eine klare Antwort für diesen Anwendungsfall nicht finden.

Quelle

2017-11-07 Mulverine Gaming

ich denke, Sie Javascript-Taste Bilder wechseln benötigen. –

Ich fügte jQuery hinzu, um das Audio abzuspielen und anzuhalten, die Knöpfe zu verstecken und zu zeigen.

$('#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>

Quelle

2017-11-07 04:38:04

Das ist perfekt danke! –

Audio Play Pause Toggle Button

Antwort

Verwandte Themen