2

Wix はまだ Jquery をサポートしていないので、HTML エディターで実行するしかありません。jsfiddle で HTML、Jquery、および CSS コードを完全に実行することができました。

しかし、これらすべてのコードを [コードの編集] ウィンドウで実行しようとすると、Jquery が機能せず、オーディオ プレーヤーの再生/一時停止のトランジションが失われます。

これが私がやろうとしたことです：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.control').on('mousedown', function() {
  $(this).toggleClass('pause play');
});

$(document).on('keyup', function(e) {
  if (e.which == 32) {
    $('.control').toggleClass('pause play');
  }
});

</script>

<div class="control play trigger-audio">
  <span class="left"></span>
  <audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" volume="1.0"></audio>
  <span class="right"></span>
</div>
<br>
<br>
<br>
<div class="control play trigger-audio">
  <span class="left"></span>
  <audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" volume="1.0"></audio>
  <span class="right"></span>
</div>

<style type="text/css">
.control {
    border: 2.0px solid #333;
    border-radius: 50%;
    margin: 20px;
    padding: 28px;
    width: 112px;
    height: 112px;
    font-size: 0;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

.control,
.control .left,
.control .right,
.control:before {
    display: inline-block;
    vertical-align: middle;
    transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
    transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}

.control:before {
    content: "";
    height: 112px;
}

.control.pause .left,
.control.pause .right {
    margin: 0;
    border-left: 36.96px solid #333;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    height: 96.992px;
}

.control.pause .left {
    border-right: 22.4px solid transparent;
}

.control.play .left {
    margin-left: 18.66666667px;
    border-left: 48.496px solid #333;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 0px solid transparent;
    height: 56px;
}

.control.play .right {
    margin: 0;
    border-left: 48.496px solid #333;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    height: 0px;
}

.control:hover {
    border-color: #000;
}

.control:hover .left,
.control:hover .right {
    border-left-color: #000;
}
</style>
</head>
</html>

私は何を間違っていますか？

私は初心者なので、助けていただければ幸いです。前もって感謝します ：）

4

2 に答える 2