[vue] vue에서 오디오 사용

Edward Hyun·2022년 2월 10일
0

app&web-dev

목록 보기
77/178
post-custom-banner
<template>
  <div
    @click="
      play(
        'http://soundbible.com/mp3/Air Plane Ding-SoundBible.com-496729130.mp3'
      )
    "
  >
    audioPlayer
  </div>
</template>
<script>
export default {
  methods: {
    play(sound) {
      if (sound) {
        var audio = new Audio(sound);
        audio.play();
      }
    }
  }
};
</script>

출처::
https://kyounghwan01.github.io/blog/Vue/vue/audio/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%87%E1%85%A5%E1%86%B8

//file for export
export const AudioPlay = (file) => {
  new Audio(`/static/sounds/${file}`).play();    //under folder public
};

//file import
import {AudioPlay} from './comm';

//onClick event 
AudioPlay('stockin-ok.mp3');

출처 ::
https://stackoverflow.com/questions/55270136/cannot-play-audio-in-react-typescript-with-play-function-error-property-pl

profile
앱&웹개발(flutter, vuejs, typescript, react), 인공지능(nlp, asr, rl), 백엔드(nodejs, flask, golang, grpc, webrtc, aws, msa, nft, spring cloud, nest.js), 함수형 프로그래밍(scala, erlang)을 공부하며 정리합니다.
post-custom-banner

0개의 댓글