bioerosion.html

<!DOCTYPE html>
<html class="theme-dark has-navbar-fixed-top" lang="zh-Hant">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>
      全新專輯《時間浸漬 BIOEROSION》林強 開源電子音樂專輯 即將預購 | 10
      週年「開源祭」 開放文化基金會 Open Culture Foundation
    </title>
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://10years.ocf.tw/bioerosion.html" />
    <meta
      name="description"
      content="林強最開放的電子音樂專輯，基于「開放」與「分享」兩大核心理念所創作的全新專輯《時間浸漬 BIOEROSION》。這張專輯是他繼 2005 年《驚蟄》之後，時隔 19 年再次在台灣推出的電子音樂作品，整張專輯是以環境音樂（Ambient Music）為基底，探索當代電子音樂的全新聲景、音畫，同時，也展現出林強對當代文化的深度思考，反映出他對網路自由與知識共享的最新看法。林強長期以來支持「台灣創用CC計劃」（Creative Commons Taiwan），他堅信知識和創作的自由流通是創意的源泉。因此，在這次「開源祭」中，他將《時間浸漬 BIOEROSION》以創用 CC 授權的方式，在 OCF 官網上免費開放下載，體現林強對創作自由和知識共享的承諾，也與 OCF 推動開放文化和數位公民社會的使命完美契合。"
    />
    <meta
      property="og:description"
      content="林強最開放的電子音樂專輯，基于「開放」與「分享」兩大核心理念所創作的全新專輯《時間浸漬 BIOEROSION》。這張專輯是他繼 2005 年《驚蟄》之後，時隔 19 年再次在台灣推出的電子音樂作品，整張專輯是以環境音樂（Ambient Music）為基底，探索當代電子音樂的全新聲景、音畫，同時，也展現出林強對當代文化的深度思考，反映出他對網路自由與知識共享的最新看法。林強長期以來支持「台灣創用CC計劃」（Creative Commons Taiwan），他堅信知識和創作的自由流通是創意的源泉。因此，在這次「開源祭」中，他將《時間浸漬 BIOEROSION》以創用 CC 授權的方式，在 OCF 官網上免費開放下載，體現林強對創作自由和知識共享的承諾，也與 OCF 推動開放文化和數位公民社會的使命完美契合。"
    />
    <meta
      name="twitter:description"
      content="林強最開放的電子音樂專輯，基于「開放」與「分享」兩大核心理念所創作的全新專輯《時間浸漬 BIOEROSION》。這張專輯是他繼 2005 年《驚蟄》之後，時隔 19 年再次在台灣推出的電子音樂作品，整張專輯是以環境音樂（Ambient Music）為基底，探索當代電子音樂的全新聲景、音畫，同時，也展現出林強對當代文化的深度思考，反映出他對網路自由與知識共享的最新看法。林強長期以來支持「台灣創用CC計劃」（Creative Commons Taiwan），他堅信知識和創作的自由流通是創意的源泉。因此，在這次「開源祭」中，他將《時間浸漬 BIOEROSION》以創用 CC 授權的方式，在 OCF 官網上免費開放下載，體現林強對創作自由和知識共享的承諾，也與 OCF 推動開放文化和數位公民社會的使命完美契合。"
    />
    <meta
      property="og:image"
      content="https://10years.ocf.tw/img/bioerosion.webp"
    />
    <meta
      name="twitter:image"
      content="https://10years.ocf.tw/img/bioerosion.webp"
    />
    <meta property="twitter:card" content="summary_large_image" />
    <meta
      property="og:title"
      content="全新專輯《時間浸漬 BIOEROSION》林強 開源電子音樂專輯 即將預購 | 10 週年「開源祭」特別活動 財團法人開放文化基金會 (OCF)"
    />
    <meta
      name="twitter:title"
      content="全新專輯《時間浸漬 BIOEROSION》林強 開源電子音樂專輯 即將預購 | 10 週年「開源祭」特別活動 財團法人開放文化基金會 (OCF)"
    />
    <link rel="icon" type="image/svg+xml" href="/img/ocf.png" />
    <link rel="stylesheet" href="/css/bulma.min.css" />
    <link rel="stylesheet" href="/fa/css/all.min.css" />
    <link rel="stylesheet" href="/css/all.css" />
    <style>
      :root {
        --bulma-navbar-height: 0;
      }

      body,
      html {
        height: 100%;
        overflow: hidden;
      }

      .bg {
        background-image: url("/img/bioerosion.webp");
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        animation: move 120s infinite;
      }
      .bg::before,
      .bg::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: inherit;
        background-size: inherit;
        background-position: inherit;
        filter: blur(5px);
        opacity: 1;
        animation: trailingEffect 20s infinite;
      }

      .bg::after {
        filter: blur(1px);
        opacity: 0.7;
        animation-delay: 10s;
      }

      @keyframes move {
        0% {
          transform: translate(0, 0);
        }
        50% {
          transform: scale(3, 1.5);
        }
        100% {
          transform: translate(0, 0);
        }
      }

      @keyframes trailingEffect {
        0% {
          transform: translate(0, 0);
        }
        50% {
          filter: blur(0);
          opacity: 0;
        }
        100% {
          transform: translate(0, 0);
        }
      }
      .desc {
        top: 5px;
        width: 100%;
        position: fixed;
        transition: all 0.5s ease-in-out;
      }
      .desc.playing {
        top: 20px;
        opacity: 0.2;
      }
      .desc.playing:hover {
        opacity: 1;
      }
      .desc .button.is-light {
        box-shadow: 0 0 1rem #ffffff;
        background-color: rgba(0, 0, 0, 0.3);
      }
      .desc .button.is-text {
        color: black;
      }
      .desc .button:hover {
        text-shadow: 0 0 0.5rem #ffffff;
      }
      .descarea {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 12px;
        box-shadow: 0 0 1rem rgba(255, 255, 255, 0.5);
      }
      .descarea p,
      .descarea h1 {
        text-shadow: 0 0 0.3rem black;
        color: #ffffff;
        font-size: small;
      }

      @media screen and (min-width: 920px) {
        .descarea p {
          font-size: medium;
        }
      }
      @media screen and (max-height: 600px) {
        .descarea p {
          font-size: small;
        }
      }
      .descarea strong {
        font-weight: bold;
        font-size: medium;
        color: #ffffff;
        text-shadow: 0 0 0.3rem #ff4800;
        padding-bottom: 0.5rem;
      }
      .descarea p {
        padding-bottom: 0.5rem;
        line-height: 1.4rem;
      }
      .descarea figure iframe {
        border-radius: 8px;
        box-shadow: 0 0 1rem rgba(255, 255, 255, 0.5);
      }
      #player {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        user-select: none;
        pointer-events: none;
        aspect-ratio: 16/9;
      }
    </style>
  </head>
  <body>
    <div class="bg"></div>
    <div id="player"></div>
    <div class="desc">
      <div class="section">
        <div class="columns">
          <div class="colunm is-5 descarea">
            <div class="buttons" style="margin-bottom: -3px">
              <a
                class="button is-rounded is-light is-outlined is-warning"
                href="https://www.flyingv.cc/projects/35438"
              >
                <span class="icon"><i class="far fa-clock"></i></span>
                <span>前往 flyingV 募資</span>
              </a>
              <a
                id="pp"
                class="button is-rounded is-light is-outlined is-loading is-info"
              >
                <span class="icon"><i class="fas fa-headphones-alt"></i></span>
                <span>線上搶先聽</span>
              </a>
              <a
                class="button is-rounded is-text"
                href="https://www.youtube.com/watch?v=KFgQ0rk9DHM"
                >YouTube</a
              >
            </div>
            <div class="desc_content" style="margin-top: 12px">
              <p>
                開放文化基金會（Open Culture Foundation，簡稱
                OCF）成立十週年，策劃以科技跨界為主題的盛典「開源祭」，將於 9 月
                14 日（星期六）於 Pipe Live Music
                及公館水岸廣場華麗登場，邀請多位知名音樂人及科技領域專家共同歡慶，探索未來科技與創意的無限可能。近期也壓軸公布與林強的共創計畫，林強將攜手義大利藝術家
                Luca
                Bonaccorsi，首次表演其基於「開放」與「分享」兩大核心理念所創作的全新專輯<strong
                  >《時間浸漬 BIOEROSION》</strong
                >，展現音樂及視覺藝術的創新融合。
              </p>
              <p>
                此專輯為林強繼 2005 年《驚蟄》之後，時隔 19
                年再次在臺灣推出的電子音樂作品。整張專輯採用 CC
                授權方式發布，不僅鼓勵民眾以此為素材進行二次創作，更有限量彩膠同步在
                flyingV 募資。
              </p>
            </div>
          </div>
          <div class="column is-7"></div>
        </div>
      </div>
    </div>
    <script src="/js/all.js"></script>
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-X3DG2E5E3W"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-X3DG2E5E3W");
    </script>
    <script>
      function onYouTubeIframeAPIReady() {
        var player = new YT.Player("player", {
          height: "100%",
          width: "100%",
          videoId: "KFgQ0rk9DHM",
          playerVars: {
            controls: 0,
            showinfo: 0,
            playlist: "KFgQ0rk9DHM",
            loop: 1,
            frameBorder: 0,
            iv_load_policy: 3,
            playsinline: 0,
            rel: 0,
          },
          events: {
            onReady: onPlayerReady,
            onError: onErrorEvent,
            onAutoplayBlocked: onAutoplayBlockedEvent,
          },
        });
      }

      function onPlayerReady(event) {
        document.getElementById("pp").classList.remove("is-loading");
      }

      function onErrorEvent(event) {
        document.getElementById("pp").href =
          "https://www.youtube.com/watch?v=KFgQ0rk9DHM";
        document.getElementById("pp").innerText = "到 YouTube 上收聽";
        document.getElementById("pp").classList.remove("is-loading");
      }

      function onAutoplayBlockedEvent(event) {
        document.getElementById("pp").innerText = "請啟用瀏覽器的自動播放";
        document.getElementById("pp").classList.remove("is-loading");
      }

      var tag = document.createElement("script");
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName("script")[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      document.getElementById("pp").addEventListener("click", function () {
        var playerState = YT.get("player").getPlayerState();
        if (playerState === YT.PlayerState.PLAYING) {
          YT.get("player").pauseVideo();
          document.getElementById("pp").innerText = "► 播放";
          document
            .getElementsByClassName("desc_content")[0]
            .classList.remove("is-hidden");
          document
            .getElementsByClassName("desc")[0]
            .classList.remove("playing");
        } else {
          YT.get("player").playVideo();
          document.getElementById("pp").innerText = "⏸︎ 暫停";
          document.getElementsByClassName("bg")[0].classList.add("is-hidden");
          document
            .getElementsByClassName("desc_content")[0]
            .classList.add("is-hidden");
          document.getElementsByClassName("desc")[0].classList.add("playing");
        }
      });
    </script>
  </body>
</html>