How to set default volume audio svelte in modal

Question

Hello I would like to know why I can't set the default value of volume of my audio in a modal in svelte. When I add this line: audio.volume = 0.5; my modal not open anymore. Here is all the modal component:

<script>
    export let texte;
    export let clip;

    let audio = document.getElementById("aled");

    audio.volume = 0.5;
</script>

<style>
    body
    {
        -webkit-user-select: none; /* Safari */        
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
        user-select: none; /* Standard */
    }
    .clip
    {
        text-align: center;
    }
</style>
<body>
    <div class="clip">
        <audio id="aled" src={clip} controls></audio>
        <div>
            BLA BLA
            {texte}
        </div>
    </div>
</body>

Answer 1

Let's make it more Svelte:

<script>
    import { onMount } from 'svelte';
    export let texte;
    export let clip;

    let audio;
    onMount(() => {
      // when the audio binding is ready set the volume
      audio.volume= 0.5;
    }) 
</script>

<style>
    body
    {
        -webkit-user-select: none; /* Safari */        
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
        user-select: none; /* Standard */
    }
    .clip
    {
        text-align: center;
    }
</style>
<body>
    <div class="clip">
        <audio bind:this={audio} src={clip} controls></audio>
        <div>
            BLA BLA
            {texte}
        </div>
    </div>
</body>

How to set default volume audio svelte in modal

Question

1 answers

solution1
2 ACCPTED 2021-05-28 00:10:36

How to set default volume audio svelte in modal

Question

1 answers

solution1 2 ACCPTED 2021-05-28 00:10:36

solution1
2 ACCPTED 2021-05-28 00:10:36