为什么我的音频片段没有出现在我的网站上？

Question

我正在创建一个显示一些声音的网站，但是当我尝试添加声音时它们没有出现。如果我只是运行在网站上创建音频的代码，它可以正常工作，但是当我运行所有其他代码时，它就不再工作了。

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Working Music</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <h1>Working Music</h1>
        </div>
        <div>
            <audio id="sound1" controls>
                <source src="audio/Relaxing-thunderstorm.mp3" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>
        </div>        
    </body>
</html>

CSS代码：

* {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

body {
    background-image: url("https://www.toptal.com/designers/subtlepatterns/uploads/hip-square.png");
    background-color: grey;
    display: flex;
}

@font-face {
    font-family: 'Devilish Style One';
    src: url(fonts/devilish-styleone-webfont.woff2);
}

h1 {
    font-family: 'Devilish Style One';
    font-size: 5rem;
    --main-color: rgb(193, 196, 149);
    color: var(--main-color);
}

.container {
    border: 5px solid black;
    --background-color: black;
    background-color: var(--background-color);
    min-width: 100%;
}

audio {
    align-items: center;
    justify-items: center;
    z-index: 5;
}

Answer 1

可能是因为无法自动播放音频

Answer 2

您的代码工作正常。正如您在此代码段中所见，<audio> 元素按预期出现和播放。我使用 CDN 提供的示例音频文件进行测试，但这是我所做的唯一更改。

body {
    background-image: url("https://www.toptal.com/designers/subtlepatterns/uploads/hip-square.png");
    background-color: grey;
    display: flex;
}

@font-face {
    font-family: 'Devilish Style One';
    src: url(fonts/devilish-styleone-webfont.woff2);
}

h1 {
    font-family: 'Devilish Style One';
    font-size: 5rem;
    --main-color: rgb(193, 196, 149);
    color: var(--main-color);
}

.container {
    border: 5px solid black;
    --background-color: black;
    background-color: var(--background-color);
    min-width: 100%;
}

audio {
    align-items: center;
    justify-items: center;
    z-index: 5;
}

<html>
    <head>
        <title>Working Music</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <h1>Working Music</h1>
        </div>
        <div>
          <audio id="sound1" controls>
            <source src="https://cdn.jsdelivr.net/npm/sample-audio-files@1.0.7/media/Justice_Genesis_first_30_seconds_tight.wav" type="audio/wav">
            Your browser does not support the audio element.
          </audio>
        </div>        
    </body>
</html>

但是，您的CSS中有一些不寻常的规则。

首先，您的 body 将 display 属性设置为 flex 并且 .container 元素的 min-width 为 100% 这会强制您水平滚动以查看音频元素。如果您希望音频显示在标题下方，您需要将 flex-flow: column nowrap; 添加到 body 规则。

此外，无需在 audio 元素上设置 align-items 或 justify-items。这些属性没有效果，因为这些元素使用 ShadowRoot 来封装控件。您可能想在包含音频元素的 div 上设置这些属性。

body {
    background-image: url("https://www.toptal.com/designers/subtlepatterns/uploads/hip-square.png");
    background-color: grey;
    display: flex;
    flex-flow: column nowrap;
}

@font-face {
    font-family: 'Devilish Style One';
    src: url(fonts/devilish-styleone-webfont.woff2);
}

h1 {
    font-family: 'Devilish Style One';
    font-size: 5rem;
    --main-color: rgb(193, 196, 149);
    color: var(--main-color);
}

.container {
    border: 5px solid black;
    --background-color: black;
    background-color: var(--background-color);
    min-width: 100%;
}

.audio-list {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

<html>
    <head>
        <title>Working Music</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <h1>Working Music</h1>
        </div>
        <div class="audio-list">
          <audio id="sound1" controls>
            <source src="https://cdn.jsdelivr.net/npm/sample-audio-files@1.0.7/media/Justice_Genesis_first_30_seconds_tight.wav" type="audio/wav">
            Your browser does not support the audio element.
          </audio>
        </div>        
    </body>
</html>

为什么我的音频片段没有出现在我的网站上？

Why isn't my audio fragment appearing on my website?

html

css

audio