个人中心
gpt4 book ai didi

javascript - Web 浏览器上的 SVG 和音频

转载 作者：行者123 更新时间：2023-12-03 01:41:47 26 4
gpt4 key购买 nike

我想知道是否可以在 Web 浏览器中使用 SVG 文件播放音频。
我找到了这个 thread在这里，但我不能评论它=/

于是我看到了这个webpage的代码但是当我尝试时它对我不起作用。
我的控制台说:

TypeError: $(...).play is not a function[En savoir plus]  test.html:1:1
TypeError: $(...).pause is not a function[En savoir plus]

我不知道如何处理这个 =/

这是代码: 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:html="http://www.w3.org/1999/xhtml" viewBox="0 0 1600 1000">
  <defs>
    <style>
      :root { background: black }
      text { fill: white; font: 60px sans-serif; font-weight: 900; text-anchor: middle; pointer-events: none }
      #about { pointer-events: visiblePainted; }
      a { fill: #4096EE; }
      a:hover { text-decoration: underline; }
      .button:hover { filter: url(#huerot80) }
      .button:active { filter: url(#huerot50) }
      #about { font-size: 12px }
    </style>
    <filter id="ds">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
      <feOffset dx="2" dy="2"/>
      <feComposite in="SourceGraphic" operator="over"/>
    </filter>
    <filter id="huerot80" x="0" y="0" width="1" height="1">
      <feColorMatrix type="hueRotate" values="80"/>
    </filter>
    <filter id="huerot50" x="0" y="0" width="1" height="1">
      <feColorMatrix type="hueRotate" values="50"/>
    </filter>
    <linearGradient id="stops">
      <stop style="stop-color:#4096EE;stop-opacity:1" offset="0"/>
      <stop style="stop-color:#4096EE;stop-opacity:0" offset="1"/>
    </linearGradient>
    <linearGradient x1="0" y1="0" x2="0" y2="-1.5" id="fill" xlink:href="#stops" spreadMethod="reflect"/>
    <linearGradient x1="0" y1="0" x2="0" y2="-1.5" id="stroke" xlink:href="#stops" spreadMethod="reflect" gradientTransform="scale(1 -1)"/>
    <script>
      function $(sel) { return document.querySelector(sel); }
    </script>
    <audio xmlns="http://www.w3.org/1999/xhtml">
      <source src="assets/sounds/sound.ogg" type="audio/ogg"/>

    </audio>
  </defs>

  <g class="button" transform="translate(600, 200)">
    <rect width="400" height="86" rx="16"
       fill="url(#fill)" stroke="url(#stroke)"
       onclick="try { $('audio').currentTime=0; } catch(e) {} $('audio').play()"/>
    <text x="200" y="65" filter="url(#ds)">Click me</text>
  </g>

  <g class="button" transform="translate(600, 300)">
    <rect width="400" height="86" rx="16"
       fill="url(#fill)" stroke="url(#stroke)"
       onmouseover="$('audio').play(); $('audio').loop=true;" onmouseout="$('audio').pause(); try { $('audio').currentTime=0; } catch(e) {} $('audio').loop=false;"/>
    <text x="200" y="65" filter="url(#ds)">Hover me</text>
  </g>

  <text id="about" x="50%" y="50%">This example uses HTML5 audio together with SVG.
    <a xlink:href="http://soundbible.com/1137-Bubbles.html">Bubbles sound effect</a> recorded by Mike Koenig (<a xlink:href="http://creativecommons.org/licenses/by/3.0/">CC-By</a>).
  </text>

</svg>

就是这样。

干杯 =)

最佳答案

我得到了答案 somewhere else .我只需要将我的 test.html 重命名为 test.svg 并删除 <html>和 <head>块。它现在就像一个魅力。

关于javascript - Web 浏览器上的 SVG 和音频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46773596/

26 4 0
文章推荐： elasticsearch - elasticsearch多个关键文件进行汇总
文章推荐： elasticsearch - "Unresolved requirement: Import-Package"用于不在我的 build.gradle 中的模块
文章推荐： laravel - 在Elasticsearch中进行自定义排序？
文章推荐： audio - ffmpeg - 将图像和音频组合成视频后，视频比音频长
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com