vue自动播放音频提示音(根据接口返回的状态值,提示声音。 code==0:播放成功音效; else 播放失败的音效)

这篇具有很好参考价值的文章主要介绍了vue自动播放音频提示音(根据接口返回的状态值,提示声音。 code==0:播放成功音效; else 播放失败的音效)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Audio对象

前言:

有时我们并不是想要在页面上放置一个播放音频的控件然后人为点击去播放,**而是通过一个图标点击事件或者js去控制它的播放暂停等操作,此时我们就要使用到Audio对象,**博主这里是Vue项目,所以在data中使用的同一个Audio实例

项目需求:输入框输入完成

1. 提供项目所需要的提示音 音频

vue自动播放音频,vue,element,方法,vue.js,input,elementui

2.在 data 中 定义 一个音频对象 以及引入需要的音频

export default {
    data(){
        return {
            // 实例化一个音频播放器对象
            audio: new Audio()
            successUrl: require("../../../assets/music/success.mp3"),
            errorUrl: require("../../../assets/music/error.wav"),
        }
    }
}

3.在输入框调取接口方法里,根据接口返回状态 调取不同的声音

vue自动播放音频,vue,element,方法,vue.js,input,elementui

getInput() {
      this.queryParams = {
        code: this.barcode,
        name: this.pageOrderName,
      };
      operatePos(this.queryParams).then((res) => {
        this.name = "";
        this.barcode = "";
        if (res.code == 0) {
          // 开启自动播放
          this.audio.autoplay = true;
          this.audio.src = this.successUrl;
          this.sonList = res.data;
          this.getList(this.sonList);
          this.poData = this.sonList.lastScanBoxCode.slice(
            this.sonList.lastScanBoxCode.length - 1
          );
          this.resSize = this.sonList.platsize;
          this.$infoMsg.showInfoMsg(res.msg, this);
        } else {
          // 开启自动播放
          this.audio.autoplay = true;
          this.audio.src = this.errorUrl;
          this.$infoMsg.showErrorMsg(res.msg, this);
        }
      });
    },

基础tips:

后续只需要通过切换src的方式让它播放,根据不同的需求可以在页面加载时给它设置自动播放,然后每播放完毕一个音频后要做什么事,通过end事件进行回调操作

created(){
    // 开启自动播放
    this.audio.autoplay = true;
    // 绑定播放完毕事件,每次放完了可以做一些收尾的事
    this.audio.addEventListener('ended', () => {
      // dosomething...
    });
}

设置播放的src方式:

this.audio.src = url

播放暂停的方法:

await this.audio.play() // 播放
this.audio.pause() // 暂停
// 因为加载音频文件是需要时间的,所以play方法返回的上一个promise,我们要等待他加载完成才能播放

这些基本了解后就可以自己控制声音的播放啦~文章来源地址https://www.toymoban.com/news/detail-546341.html

到了这里,关于vue自动播放音频提示音(根据接口返回的状态值,提示声音。 code==0:播放成功音效; else 播放失败的音效)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 音频视频自动播放解决方案

    1.1、使用背景 公司项目需要用到音频自动播放的功能,首先想到的就是autoplay属性。 想让内容自动播放的最简单方法是将autoplay属性添加到元素,并将autoplay属性设置为 true ,当 autoplay 的属性为 true 时,媒体元素将在发生以下情况后尽快自动开始播放: 页面允许使用自动播放

    2023年04月14日
    浏览(47)
  • audio音频不能自动播放的解决方法

    由于浏览器限制的原因,不允许自动播放audio音频,尝试网上的方法后也没有进展(如果有解决方法,欢迎评论~) 一、首先创建 audio 标签 二、因为在页面刷新后需要先执行动画,动画完成后才去播放音乐,所以在执行 mounted 函数时,先加载音乐源 三、在动画完成后,进

    2024年02月11日
    浏览(110)
  • AICG,人工智能自动生成内容——根据文本生成图像,视频,音频

    1、什么是AICG? 什么是AICG? AICG是指人工智能自动生成内容。 通过算法模型,将文本转化为图像、音频、视频等多种形式。 在数字时代,AICG已经成为各种领域中不可或缺的一部分。 AICG的应用场景 AICG在数字营销、广告制作、电影制作等领域广泛应用。 可以用于教育、娱乐

    2024年02月14日
    浏览(46)
  • 解决浏览器无法自动播放音频的问题

    项目场景:要求根据后台返回数据做一个语音提示功能 浏览器报Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. 由于浏览器为了避免自动播放音频打扰用户,因此浏览器做出了限制,只有用户与浏览器交互,如点击事件等等,才会播放音频

    2024年02月12日
    浏览(48)
  • 在vue中添加音频,并控制播放停止播放

    在 Vue 组件的 data() 方法中创建一个新的 Audio 对象,如下所示: 这里假设音频文件位于 Vue 项目的 src/assets 目录下,并命名为 audio.mp3 。 在 Vue 组件的 methods() 方法中添加以下方法来控制音频的播放和停止: 在 HTML 模板中添加一个按钮,用于触发音频的播放和停止操作: 完成

    2024年01月18日
    浏览(40)
  • 【微信小程序】微信小程序的接口调入 获取太阳码 根据返回值的类型进行接收,微信接口可能直接返回图片,也可能返回一个错误信息的json,同时兼容处理这两种情况

    在开发一个关于微信小程序的过程中,有一个这样的需求,要求生成微信小程序的太阳码,然而这个东西的请求方式我们是这样的:我作为后端服务去请求这个太阳码的二维码,然后将获取到的太阳码二维码的图片返回给小程序端进行接收,然后小程序端进行一个展示 原本以

    2024年02月04日
    浏览(59)
  • Android 使用webView打开网页可以实现自动播放音频

    使用webview 自动播放音视频,场景如,流媒体自动部分,音视频通话等。会出现如下问题:   解决方案如下: 配置webview 如下,这样可以自动播放音频。

    2024年02月12日
    浏览(62)
  • 微信公众号H5音频视频自动播放(安卓,苹果)

    引入jssdk 音频或视频自动播放

    2024年02月11日
    浏览(104)
  • Vue中如何进行音频与视频播放?

    在Vue中,我们可以使用HTML5的 audio 和 video 标签来实现音频和视频的播放。Vue本身并没有提供专门的音频或视频播放组件,但是可以使用Vue的数据绑定和生命周期钩子来控制音频和视频的播放。 在Vue中,我们可以使用 audio 标签来嵌入音频文件。下面是一个简单的例子: 这个例

    2024年02月10日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包