<audio> HTML5 не работает в Chrome, но работает в Edge - PullRequest
Новая
       8

<audio> HTML5 не работает в Chrome, но работает в Edge

0 голосов
/ 04 ноября 2018

По какой-то причине аудиоэлемент (прилагается ниже) отображается в Edge, но не в Chrome. Я пытался добавить и удалить элемент управления. Аудио элементы в коде ниже находятся в самом низу. Я добавил два из них, чтобы посмотреть, будет ли это иметь значение, и они оба появляются в Edge, но не в Chrome. Я просто не могу понять это. Мой браузер Chrome - версия 70.0.3538.77. Спасибо, что прочитали это! 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Bulma!</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <link rel="stylesheet" href="./helper.css">
</head>

<body>

  <section class="hero is-primary">
    <!-- Hero head: will stick at the top -->
    <div class="hero-head">
      <header class="navbar">
        <div class="container">
          <div class="navbar-brand">
            <a class="navbar-item">
              <span class="title">NAVARO</span>
            </a>
          </div>
          <div id="navbarMenuHeroC" class="navbar-menu">
            <div class="navbar-end">
              <a class="navbar-item">
                Home
              </a>
              <a class="navbar-item">
                Albums
              </a>
              <a class="navbar-item">
                Concerts
              </a>
              <span class="navbar-item">
                <a class="button is-primary is-inverted">
                  <span class="icon">
                    <i class="fas fa-headphones-alt"></i>
                  </span>
              <span>Listen</span>
              </a>
              </span>
            </div>
          </div>
        </div>
      </header>
    </div>

    <!-- Hero content: will be in the middle -->
    <div class="hero-body">
      <div class="container has-text-centered">

        <!--Album-->
        <div class="center-column">
          <figure class="image is-128x128">
            <img src="./album_cover.jpg">
          </figure>
          <h2 class="title">
            Arctic Gibbons
          </h2>
          <h2 class="subtitle">
            NAVARO // Ft. Eric Clapton
            <br />
            <span>03.11.2018</span>
          </h2>
          <a class="button is-primary is-inverted">
            <span class="icon">
              <i class="fas fa-headphones-alt"></i>
            </span>
            <span>Listen</span>
          </a>
        </div>

        <!--Song Table-->
        <div class="container center-column" style="padding:25px">
          <table class="table">
            <thead>
              <tr>
                <th>Track</th>
                <th>Song</th>
                <th>Length</th>
                <th>Listen</th>
                <th>Buy</th>
              </tr>
            </thead>

            <tbody>
              <!-- Track 1 -->
              <tr>
                <th>1</th>
                <td>The View from the Afternoon</td>
                <td>3:19</td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-headphones-alt"></i>
                    </span>

                  </a>
                </td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-shopping-cart"></i>
                    </span>
                    <span>Buy</span>
                  </a>
                </td>
              </tr>

              <!-- Track 2 -->
              <tr>
                <th>2</th>
                <td>I Bet You Look Good on the Dancefloor</td>
                <td>2:53</td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-headphones-alt"></i>
                    </span>
                  </a>
                </td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-shopping-cart"></i>
                    </span>
                    <span>Buy</span>
                  </a>
                </td>
              </tr>

              <!-- Track 3 -->
              <tr>
                <th>3</th>
                <td>Fake Tales of San Francisco</td>
                <td>2:57</td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-headphones-alt"></i>
                    </span>
                  </a>
                </td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-shopping-cart"></i>
                    </span>
                    <span>Buy</span>
                  </a>
                </td>
              </tr>

            </tbody>
          </table>
        </div>

        <div class="container center-column">
          <audio src="https://www.bensound.org/bensound-music/bensound-dubstep.mp3" controls></audio>
          <p>the audio should exist above and below this element</p>
          <audio controls>
            <source src="https://www.bensound.org/bensound-music/bensound-dubstep.mp3" type="audio/mpeg">
          </audio>

        </div>

      </div>
    </div>

  </section>

</body>

</html>

1 Ответ

0 голосов
/ 28 ноября 2018

К сожалению, это похоже на ошибку с bulma (или лежащую в основе minireset.css): https://github.com/jgthms/bulma/issues/2060. Для этого также имеется ожидающий запрос на извлечение: https://github.com/jgthms/minireset.css/pull/15.

Minireset в bulma устанавливает height в auto, что переопределяет таблицу стилей агента пользователя и приводит к 0px.

Здесь должно помочь ключевое слово CSS revert, но оно не поддерживается (кроме Safari): https://caniuse.com/#feat=css-revert-value.

Если вы хотите / можете изменить источник bulma в своем проекте, вы можете «пропатчить» minireset.sass или bulma.[min].css в соответствии с последним коммитом упомянутого запроса на извлечение.

...