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

I am creating a website that shows some sounds, but when I try to add sounds they don't appear. If I just run the code that creates the audio on the website it works fine, but when I run all the other code it does'nt work anymore.

HTML code:

<!DOCTYPE html>
<html>
    <head>
        <title>Working Music</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div >
            <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 code:

* {
    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;
}

CodePudding user response：

Probably the reason is because the audio cannot be played automatically

CodePudding user response：

You code works fine. As you can see in this snippet the <audio> element appears and plays as expected. I used a CDN served sample audio file for testing but this is the only change that I made.

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 >
            <h1>Working Music</h1>
        </div>
        <div>
          <audio id="sound1" controls>
            <source src="https://cdn.jsdelivr.net/npm/[email protected]/media/Justice_Genesis_first_30_seconds_tight.wav" type="audio/wav">
            Your browser does not support the audio element.
          </audio>
        </div>        
    </body>
</html>

However, you have some unusual rules in your CSS.

For starters, your body has it's display property set to flex and the .container element has a min-width of 100% which forces you to scroll horizontally to see the audio element. If you wish to have the audio appear below the heading you would need to add flex-flow: column nowrap; to your body rule.

Additionally, there is no need to set align-items or justify-items on the audio elements. These properties have no effect as these elements use a ShadowRoot to encapsulate the controls. You probably wanted to set these properties on the div that contains the audio elements.

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 >
            <h1>Working Music</h1>
        </div>
        <div >
          <audio id="sound1" controls>
            <source src="https://cdn.jsdelivr.net/npm/[email protected]/media/Justice_Genesis_first_30_seconds_tight.wav" type="audio/wav">
            Your browser does not support the audio element.
          </audio>
        </div>        
    </body>
</html>