获取环绕音频按钮的链接

Posted

技术标签:

【中文标题】获取环绕音频按钮的链接【英文标题】：Getting links to surround the audio button 【发布时间】：2017-11-16 02:28:18 【问题描述】：

代码 1：

您是否看到在您单击图像后，音频按钮如何出现并播放，并且周围没有链接。在 代码 1 上，如何启用围绕音频按钮的链接？

https://jsfiddle.net/7ux1s23j/29/

<style>
  .playButton 
    width: 266px;
    height: 174px;
  
  
  .initial 
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  
  
  .playButton.playing 
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: #000000;
    margin: 62px 0 0 108px;
    fill: #aaff00;
  
  
  .links div 
    margin: 0 0 12px 0;
  
  
  .links a 
    display: block;
    width: 50px;
    height: 50px;
    background-color: green;
    margin: -50px 0 0;
    transition: 0.5s ease-in-out;
  
  
  a.x1 
    margin: 0;
  
  
  a.x2 
    margin-left: 54px;
  
  
  a.x3 
    margin-left: 108px;
  
  
  a.x4 
    margin-left: 162px;
  
  
  a.x5 
    margin-left: 216px;
  
  
  .links a:hover,
  .links a:active,
  .links a:focus 
    background: blue;
  
  
  .scrl a:visited 
    background: orange;
    color: #000000;
  
  
  .scrl a:hover 
    background: red;
  
  
  .hide 
    display: none;
  
  
  .links div:last-child 
    margin-bottom: 0;
  

</style>


<div class="test hide">
  <div class="links">
    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>
  </div>
</div>

<div class="playButton">

  <div class="initial ">Links</div>

  <svg class="pause" style="display: none;margin:5px 7px;"   viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="play hide " style="margin:5px 9px;"   viewbox="0 0 85 100">
    <path 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>
</div>

<audio id="player" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
  </source>
</audio>

<script>
  (function iife() 
    "use strict";

    function playButtonClickHandler() 
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      document.querySelector('.playButton .initial').style.display = 'none';
      player.volume = 1.0;
      if (player.paused) 
        button.classList.add("playing");
        document.querySelector(".playButton .play").style.display = "none";
        document.querySelector(".playButton .pause").style.display = "inline-block";
        player.play();
       else 
        document.querySelector(".playButton .play").style.display = "inline-block";
        document.querySelector(".playButton .pause").style.display = "none";
        player.pause();
      
    
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  ());

</script>

代码 2：

点击图片后，我在它周围有链接。

https://jsfiddle.net/0yxvpa09/19/

<style>
  .cover 
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  
  
  .links div 
    margin: 0 0 12px 0;
  
  
  .links a 
    display: block;
    width: 50px;
    height: 50px;
    background-color: green;
    margin: -50px 0 0;
    transition: 0.5s ease-in-out;
  
  
  a.x1 
    margin: 0
  
  
  a.x2 
    margin-left: 54px
  
  
  a.x3 
    margin-left: 108px
  
  
  a.x4 
    margin-left: 162px
  
  
  a.x5 
    margin-left: 216px
  
  
  .links a:hover,
  .links a:active,
  .links a:focus 
    background: blue;
  
  
  .scrl a:visited 
    background: orange;
    color: #000000;
  
  
  .scrl a:hover 
    background: red;
  
  
  .hide 
    display: none;
  
  
  .links div:last-child 
    margin-bottom: 0;
  
  .playButton 
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    fill: #aaff00;
    margin: -112px 0 0 108px;
  
  
  .playButton.playing 
    background-color: #000000;
  
</style>

<div class="cover">Links</div>

<div class="test hide">









  <div class="links    ">
    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>

      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>
  </div>
</div>


<div class="playButton hide">

  <svg class="play" style="margin:5px 9px;"   viewbox="0 0 85 100">
    <path 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="display: none;margin:5px 7px;"   viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>
</div>


<script>
  (function iife() 
    "use strict";

    function hideClickedElement(evt) 
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".test").classList.remove("hide");
      document.querySelector(".playButton").classList.remove("hide");
    
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  ());

</script>

在代码 1上，如何启用围绕音频按钮的链接？

【问题讨论】：

【参考方案1】：

Here you go. This is a workaround solution for you

我只是修复如下

.playButton.playing 
  ....
  margin: -112px 0 0 108px;
  ....

然后你需要控制 linksDiv 在什么条件下显示。 document.getElementById("myLinkDiv").style.display='none';

或

document.getElementById("myLinkDiv").classList.add("hide");

【讨论】：

当然你可以使用“classList”来设计需要添加或删除类的条件。 你能给我看一个使用类列表的例子吗？这就是我之前试图弄清楚的。 我更新了。您需要自己尝试完成。 document.querySelector("myLinkDiv").style.display='';你需要使用 "classList.remove("hide") document.querySelector("myLinkDiv").classList.remove("hide"); jsfiddle.net/7ux1s23j/37

以上是关于获取环绕音频按钮的链接的主要内容，如果未能解决你的问题，请参考以下文章

声临其境，轻松几步教你把音频变成3D环绕音

arc音频回传功能需要投影支持吗

从 Rust 中的多个音频流中并行获取相同大小的块

HMS Core音频编辑服务音源分离与空间音频渲染，助力快速进入3D音频的世界

怎么获取一段mp3格式的音频的播放时长

保存多个录制音频文件并获取所有录制音频