如何正确启用动画的"AutoPlay“

Question

当网站加载时，我使用剪切的html来播放音频。这似乎工作正常。现在，我需要“正弦波”的动画“自动播放”时，音频“自动播放”页面加载。

音频按预期自动播放，但“动画”仅在wave本身的"click“功能上播放。

我尝试添加下面的"audio.autoplay“行(用于音频的自动播放)，但当页面加载音频的自动播放时，它似乎不是允许wave动画开始的正确方式：

audio.autoplay = true; // for autoplay audio
$(this).addClass('fa-play'); // for autoplay animation

​

var audio = new Audio("https://api.twilio.com/cowbell.mp3");

audio.autoplay = true; // add this
$(this).addClass('fa-play');

$('#play-pause-button').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.play();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

audio.onended = function() {
     $("#wave").removeClass('fa-pause');
     $("#wave").addClass('fa-play');
};



const path = document.querySelector('#wave');
const animation = document.querySelector('#moveTheWave');
const m = 0.512286623256592433;

function buildWave(w, h) {

  const a = h / 4;
  const y = h / 2;

  const pathData = [
  'M', w * 0, y + a / 2,
  'c',
  a * m, 0,
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,

  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a].
  join(' ');

  path.setAttribute('d', pathData);
}

buildWave(90, 60);

#play-pause-button{
  cursor: pointer;
  align-items: center;
  border: none;
  display: flex;
  height: 110px;
  margin: 0 auto;
  width: 110px;
  position: fixed;
  bottom: 0px;
  right: 0px; 
  bottom: -4px;
  right: 10px;
}

svg {
  margin: 0 auto;
  overflow: hidden;
}

#wave {
  stroke-dasharray: 0 16 101 16;
  -webkit-animation: infinite;
          animation: moveTheWave 2400ms linear infinite;
}

@-webkit-keyframes moveTheWave {
  0% {
    stroke-dashoffset: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    stroke-dashoffset: -133;
    transform: translate3d(-90px, 0, 0);
  }
}

@keyframes moveTheWave {
  0% {
    stroke-dashoffset: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    stroke-dashoffset: -133;
    transform: translate3d(-90px, 0, 0);
  }
}

.fa-pause path {
animation-play-state: running !important;
}
.fa-play path {
animation-play-state: paused !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="play-pause-button" class="fa-play">
  <svg xmlns="http://www.w3.org/2000/svg" 
     width="80px" height="60px"
     viewBox="5 0 80 60">
    <path id="wave" 
        fill="none" 
        stroke="#262626" 
        stroke-width="4"
        stroke-linecap="round">
    </path>
  </svg>
</div>

​

Page where auto load error occurs

Answer 1

只要你在CSS和JS中颠倒了播放和暂停功能，你的脚本中就会有一些打字错误。

试试这个代码片段

​

var audio = new Audio("https://api.twilio.com/cowbell.mp3");
$(document).ready(function() {
audio.autoplay = true; // add this
$('#play-pause-button').addClass('fa-play');
});
$('#play-pause-button').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.pause();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.play();
   }
});

audio.onended = function() {
     $("#wave").removeClass('fa-pause');
     $("#wave").addClass('fa-play');
};



const path = document.querySelector('#wave');
const animation = document.querySelector('#moveTheWave');
const m = 0.512286623256592433;

function buildWave(w, h) {

  const a = h / 4;
  const y = h / 2;

  const pathData = [
  'M', w * 0, y + a / 2,
  'c',
  a * m, 0,
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,

  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a,
  's',
  -(1 - a) * m, a,
  a, a,
  's',
  -(1 - a) * m, -a,
  a, -a].
  join(' ');

  path.setAttribute('d', pathData);
}

buildWave(90, 60);

#play-pause-button{
  cursor: pointer;
  align-items: center;
  border: none;
  display: flex;
  height: 110px;
  margin: 0 auto;
  width: 110px;
  position: fixed;
  bottom: 0px;
  right: 0px; 
  bottom: -4px;
  right: 10px;
}

svg {
  margin: 0 auto;
  overflow: hidden;
}

#wave {
  stroke-dasharray: 0 16 101 16;
  -webkit-animation: infinite;
          animation: moveTheWave 2400ms linear infinite;
}

@-webkit-keyframes moveTheWave {
  0% {
    stroke-dashoffset: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    stroke-dashoffset: -133;
    transform: translate3d(-90px, 0, 0);
  }
}

@keyframes moveTheWave {
  0% {
    stroke-dashoffset: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    stroke-dashoffset: -133;
    transform: translate3d(-90px, 0, 0);
  }
}

.fa-pause path {
animation-play-state: paused !important;
}
.fa-play path {
animation-play-state: running !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="play-pause-button" class="fa-pause">
  <svg xmlns="http://www.w3.org/2000/svg" 
     width="80px" height="60px"
     viewBox="5 0 80 60">
    <path id="wave" 
        fill="none" 
        stroke="#262626" 
        stroke-width="4"
        stroke-linecap="round">
    </path>
  </svg>
</div>

​