Vue3 소리 파일 활성화 하기 <audio> 태그 사용

HTML5  aduio 태그 사용 방법

 

1. 일반 연결 방법

2. 링크가 달라 질 때 마다 변경 하는 방법

 

1. 일반 연결 방법

 

Vue templete 안에 <audio>태그를 넣어 src로 링크를 연결 해주면 된다.

ex)

<template>
    <audio controls type="audio/mpeg">
      <source
        :src="https://actions.google.com/sounds/v1/ambiences/kids_playing.ogg"
      />
    </audio>
</template>

 

2. 링크가 달라 질 때 마다 변경 하는 방법

 

* 방법이 다른 이유

나뉜 이유 연결 링크는 바뀌었고 데이터도 바뀌었지만 <audio> 태그는 이전에 연결 된 링크를 잡고있기 때문에 따로 append 해주어야 한다.

 

 

 

1. audio 함수를 생성해준다.

2. 나와야 하는 audio 태그를 string형식으로 return 할 수 있게 만들어 준다.

3. template 태그에서 <div v-html> 태그안에 audio 함수를 넣어준다.

4. 들어가야하는 음성 링크를 작성한다.

 

ex)

 

<script setup lang="ts">
const audio = (text: string) => {
    return `<audio controls type="audio/mpeg">
            <source src="${text}" />
          </audio>`;
};
</script>

<template>
    <div v-html="audio("https://actions.google.com/sounds/v1/ambiences/kids_playing.ogg")"></div>
</template>