js实现音频管理和播放

最新推荐文章于 2023-02-22 16:08:28 发布
最新推荐文章于 2023-02-22 16:08:28 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： web前端 文章标签： js

不是很熟悉js所以音频管理和播放看起来真的很复杂的样子，这个是在msdn看到的。代码如下：

 <!DOCTYPE html>
<html>
  <head>
    <title>Audio playbackRate Example</title>  
</head>
<body>
<div>
  <audio id="audio1" style="width:25%" controls>Canvas not supported</audio>
</div>
<div>
<input type="text" id="audioFile" value="audio.mp3" size="60" />

</div>
  <button id="playbutton" οnclick="togglePlay();">Play</button>  
  <button οnclick="increaseSpeed();">Increase speed</button>
  <button οnclick="decreaseSpeed();">Decrease speed</button><br />
  <div id="rate"></div>

     <script type="text/javascript">
       // Create a couple of global variables to use. 
       var audioElm = document.getElementById("audio1"); // Audio element
       var ratedisplay = document.getElementById("rate"); // Rate display area

       // Hook the ratechange event and display the current playbackRate after each change
       audioElm.addEventListener("ratechange", function () {
         ratedisplay.innerHTML = "Rate: " + audioElm.playbackRate;
       }, false);

       //  Alternates between play and pause based on the value of the paused property
       function togglePlay() {
         if (document.getElementById("audio1")) {

           if (audioElm.paused == true) {
             playAudio(audioElm);    //  if player is paused, then play the file
           } else {
             pauseAudio(audioElm);   //  if player is playing, then pause
           }
         }
       }

       function playAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "Pause"; // Set button text == Pause
         // Get file from text box and assign it to the source of the audio element 
         audioElm.src = document.getElementById('audioFile').value;
         audioElm.play();
       }

       function pauseAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "play"; // Set button text == Play
         audioElm.pause();
       }

       // Increment playbackRate by 1 
       function increaseSpeed() {
         audioElm.playbackRate += 1;
       }

       // Cut playback rate in half
       function decreaseSpeed() {
         if (audioElm.playbackRate <= 1) {
           var temp = audioElm.playbackRate;
           audioElm.playbackRate = (temp / 2); 
         } else {
           audioElm.playbackRate -= 1;
         }
       }

     </script>


</body>
</html>


lynne233
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery音频播放器AUDIOPLAYER.JS
05-05
jQuery音频播放器AUDIOPLAYER.JS免费重量轻、 移动首先 浏览器兼容要求ie9以上，演示地址：http://www.jq22.com/jquery-info419
kvd:TTS音频队列播放
05-28
凯文·语音守护程序（KVD） 这是属于kevin项目的存储库。 它用于管理凯文的声音。 使用该项目的当前设置，您应该能够在简单的容器内部甚至在精心设计的环境中运行kvd 。 工作原理（简体） 等待工作 检查作业是否已缓存 如果已缓存，请使用缓存 如果未缓存，则从天蓝色获取文件 播放档案 重复 更详细地 KVD使用redis数据库和@lucemans/streams规范通过redis连接接收作业。 将作业放置在流中后，它们将按顺序执行。 对于流中的每个作业，kvd通过查看缓存内部来检查它是否已经被处理过。 用于kvd此特定实现的kvd存储在s3 （特别是minio ）中。 如果在缓存内未找到特定的消息，它将与azure voice api联络，以请求相应文本输入的.wav文件。 收到此文件后，它会临时存储在本地./audio目录中，然后播放，然后卸载到S3存储服务器上。 这样做是为了防
前端调用麦克风获取实时音频流和录音并上传至后台
05-11
文件分为两个，一个是实时获取音频流的文件，另一个是录音并上传至后台的文件，建议都在服务器环境下打开，这两天从网上整理的，希望对大家有所启发。
Websocket 推送音频文件流，前端播放及下载
weixin_43805439的博客
02-22 2404
websocket推送音频文件流，前端播放及下载
vue实现录音功能js-audio-recorder带波浪图
热门推荐
浩星
08-07 2万+
前言： 因为业务需要，现在将整理的录音功能资料记录下，使用插件js-audio-recorder 实现效果：可得到三种录音数据，pcm,wav,mp3 等 官方api入口：点我(网不好的童鞋可以看最下面的api截图) 官方案例入口：点我 官方源码git入口：点我 实现步骤： 一：安装插件js-audio-recorder cnpm ijs-audio-recorder--s 二：安装将格式转换为mp3的插件 lamejs cnpm install lamej...
html5 audio 速度问题
bonlog的专栏
03-15 8546
Audio playbackRate Example Canvas not supported Play Increase speed Decrease speed // Create a couple of global variables to use. var audioElm = document.g
PCM文件播放器
易名
05-22 5258
测试环境 源代码1. 测试环境  OK210开发板   测试方式：./pcmplayer  test.pcm2. 源代码#include <fcntl.h> #include <malloc.h> #include <sys/types.h> #include <sys/ioctl.h> #include <stdlib.h> #include <stdio.h> #include <unistd
前后端实现语音对讲功能
gaiery的博客
10-24 3988
前后端分别获取麦克风音频进行语音对讲
基于vue+websocket完成web端的实时音频播放,并绘制成波形
xuxiaobububu的博客
07-06 5384
最近项目需要在网页上实现可实时听后端传来的音频数据,并绘制成波形,花费了两个星期折腾出来,特此记录一下(博主也是前端小白一枚~~). demo源码:https://github.com/xxxxxxbin6/WebAudio/tree/master vue中websocket的使用网上有很多的教程,就不赘述,直接上代码了: 这里的player是开源的一个播放pcm流的控件,叫PCMPlayer(项目地址:https://github.com/samirkumard...
HTML5网页播放pcm语音流 websocket ArrayBuffer DataView webaudio PCM player
PkJY
06-14 3389
ArrayBuffer DataView 数据存储方式 字节序处理ArrayBuffer & DataView图解数据的存储方式数据溢出截断字节序处理参考链接PCM player demo 原文地址：Github Javascript在数据的处理上一直不是强项，比如数字不分整型和浮点数统一使用了64位浮点数，如果涉及到二进制运算则显得非常无力，在数据传输上也非常浪费带宽。在ES6针对Javascript二进制数据处理上的无力引入了原始缓冲区ArrayBuffer，并且还提供了多种位数的int类型
PCMPlayer_播放_pcm_waveOutOpen_
10-01
VS2010 WaveOutOpen 播放PCM文件
pcmPlayer_java_
10-01
基于AudioTrack播放PCM音频文件的源码实例
js实现的音乐播放器插件
01-26
4.对歌曲列表的管理，支持 列表播放、单曲循环、列表循环、随机播放 5.提供了 多个事件(例如：歌曲开始播放、歌曲停止、往列表添加歌曲)用以实现业务功能 demo地址: ...
musquito:基于HTML5的游戏和交互式网站的音频引擎
05-14
它提供了一个简单的抽象，可以更轻松地创建和播放声音。 以下是该库支持的一些核心功能。 建立在强大的Web Audio API之上 简单的API来创建和播放声音 支持声音组 支持多种编解码器 支持音频精灵 支持使用HTML5...
基于JavaScript的DES加密算法实现设计源码
04-12
本项目基于JavaScript开发，包含22个文件，包括JavaScript脚本、JSON...系统实现了基于commonJS的DES加密算法，可以加密各种文件（包括二进制文件和文本文件）和文件夹。界面友好，功能完善，适合用于文件加密管理。
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
vue+springboot 音频流播放
07-04
### 回答1： Vue和Spring Boot都是目前非常流行的前后端开发框架。实现音频流播放可以结合这两个框架来完成。 首先，在Vue中，可以使用HTML5的`audio`标签来实现音频流的播放。可以通过设置`src`属性来指定音频文件的地址，通过`controls`属性来显示播放器的控制面板。另外，还可以使用Vue的事件绑定来监听音频的播放状态，如`@play`、`@pause`等事件，以便在需要时执行相关的逻辑操作。在Vue的组件中，可以将`audio`标签封装成一个独立的组件，方便在不同的页面中进行复用。 接下来，在Spring Boot中，可以使用Java的编程语言来处理音频流。具体实现方式通常是通过`java.io`包中的相关类来读取音频文件，并将其写入`HttpServletResponse`中返回给前端。可以使用Spring Boot的`@RequestMapping`注解来定义相应的请求路径，并在方法中读取音频文件并写入响应中。同时，可以通过设定响应头的`Content-Type`来指定返回的音频流的类型，如`audio/mp3`、`audio/wav`等。此外，为了提高性能，可以考虑使用`@ResponseBody`注解，将音频流写入`OutputStream`对象，而不是全部存储在内存中。 最后，在Vue中使用`axios`等网络请求库，发送请求去调用Spring Boot后端提供的音频流接口。通过监听`audio`标签的相关事件，可以控制音频的播放、暂停、停止等操作。同时，也可以通过Vue的状态管理机制，管理音频的播放状态，如当前播放时间、总时长等信息。 综上所述，通过结合Vue和Spring Boot的特点和功能，我们可以很方便地实现音频流的播放功能。在Vue中通过`audio`标签和相关事件实现前端的控制，而在Spring Boot中，通过读取音频文件，并将音频流返回给前端。这样，我们可以在前后端分离的开发模式下，实现音频流的播放功能。 ### 回答2： Vue和Spring Boot是两个独立的框架，分别用于前端开发和后端开发。在实现音频流播放的功能时，可以分别使用Vue和Spring Boot来进行处理。 在Vue中，可以利用HTML5的Audio对象来实现音频流播放。首先，在Vue组件中引入Audio对象，并定义一个data属性来保存音频流的URL： ``` data() { return { audioUrl: 'http://example.com/audio.mp3', audio: null } }, ``` 然后，在Vue组件的生命周期钩子中初始化音频对象，并在需要播放音频的地方调用播放方法： ``` mounted() { this.audio = new Audio(this.audioUrl); this.audio.play(); } ``` 需要注意的是，由于音频流较大，可能需要使用流式传输的方式获取音频数据，并将其作为URL传递给Audio对象。 在Spring Boot中，可以使用Java的Servlet技术来实现音频流的传输。首先，创建一个Servlet类，用于处理音频流的请求： ```java @WebServlet(urlPatterns = "/audio") public class AudioServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 从数据库或文件系统读取音频数据 InputStream audioStream = // 获取音频流 // 设置Content-Type为音频类型 response.setContentType("audio/mp3"); // 将音频流写入response中 OutputStream output = response.getOutputStream(); byte[] buffer = new byte[4096]; int bytesRead; while ((bytesRead = audioStream.read(buffer)) != -1) { output.write(buffer, 0, bytesRead); } audioStream.close(); } } ``` 然后，在Spring Boot应用的启动类中注册该Servlet： ```java @SpringBootApplication public class Application extends SpringBootServletInitializer { @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.sources(Application.class); } public static void main(String[] args) { SpringApplication.run(Application.class, args); } @Bean public ServletRegistrationBean<AudioServlet> audioServletRegistration() { ServletRegistrationBean<AudioServlet> registration = new ServletRegistrationBean<>(new AudioServlet(), "/audio"); return registration; } } ``` 最后，在Vue组件中使用音频的URL来播放音频流： ```vue <audio src="http://localhost:8080/audio" controls></audio> ``` 通过以上方式，就可以在Vue和Spring Boot中实现音频流的播放功能。当Vue组件加载时，会发起对音频流的请求，Spring Boot会将音频数据流传输至Vue组件中，从而实现音频的播放。 ### 回答3： Vue和Spring Boot是两个独立的开发框架，分别用于前端和后端开发。在音频流播放方面，通常需要在后端处理音频文件的上传和存储，并提供相应的接口供前端进行播放。下面我将分别介绍Vue和Spring Boot在音频流播放方面的实现方法： 在Vue中，可以通过使用HTML5的<video>标签来实现音频流的播放。首先，在Vue组件中使用<video>标签来渲染播放器界面，然后通过Vue的数据绑定来控制音频的播放状态。可以通过使用Vue的生命周期方法来实现音频的加载和播放操作，如在mounted生命周期方法中使用JavaScript来设置音频源，然后调用play()方法来播放音频。 在Spring Boot中，可以使用Spring MVC框架来处理音频流的上传和播放。首先，编写一个Controller类，通过@GetMapping注解来映射一个URL路径，然后在该方法中使用ResponseEntity来返回音频文件的流。在返回时，设置相应的Header信息，指定Content-Type为audio/mpeg等音频格式，然后将音频文件的流写入到Response对象中，最后返回ResponseEntity对象。 综上所述，Vue和Spring Boot可以实现音频流的播放。在Vue中，我们通过HTML5的<video>标签和Vue的数据绑定来控制音频的播放状态。在Spring Boot中，通过使用Spring MVC框架处理音频文件的上传和播放，返回音频流的ResponseEntity对象。这样，我们可以通过Vue调用Spring Boot的接口来实现音频流的播放功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值