MUI音乐播放html5+audio模块

html5+ audio 模块
MUI播放音频 Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件。通过plus.audio获取音频管理对象。

权限

"Audio": {
    "description": "访问音频设备"
}

录音

// 扩展API加载完毕,现在可以正常调用扩展API
function onPlusReady() {
    r = plus.audio.getRecorder();
}
function startRecord() {
    if ( r == null ) {
        alert( "Device not ready!" );
        return;
    }
    r.record( {filename:"_doc/audio/xx.amr"}, function () {//真机测试文件在/sdcard/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc下面(.HBuilder是隐藏的,要查看隐藏的文件)
        alert( "Audio record success!" );
    }, function ( e ) {
        alert( "Audio record failed: " + e.message );
    } );
}

这样录音就被保存下来了

播放录音

function player(){//播放音乐
    s = plus.audio.createPlayer( "_doc/audio/gg.mp3" );
    var num = s.getDuration();//获取音频总长度number
    setTimeout(function(){//延时获取,否则可能没有返回长度
        var num = s.getDuration();
        alert(num)
    },100)

    s.play( function () {//播放完成回调
        alert( "Audio play success!" );
    }, function ( e ) {//失败回调
        alert( "Audio play error: " + e.message );
    } );
}

暂停播放:

function pause(){//暂停播放
    s.pause();
}

恢复播放:

function resume() {//恢复播放
    s.resume();
}

跳到指定位置播放(快进):

function seekTo(){
    s.seekTo(100);
}

完整测试代码:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Audio Example</title>
    <script type="text/javascript">
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
var r = null;
// 扩展API加载完毕,现在可以正常调用扩展API
function onPlusReady() {
    r = plus.audio.getRecorder();
}
function startRecord() {
    if ( r == null ) {
        alert( "Device not ready!" );
        return;
    }
    r.record( {filename:"_doc/audio/xx.amr"}, function () {//真机测试文件在/sdcard/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc下面(.HBuilder是隐藏的,要查看隐藏的文件)
        alert( "Audio record success!" );
    }, function ( e ) {
        alert( "Audio record failed: " + e.message );
    } );
}
function stopRecord() {
    r.stop();
}
function player(){//播放音乐
    s = plus.audio.createPlayer( "_doc/audio/gg.mp3" );
    var num = s.getDuration();//获取音频总长度number
    setTimeout(function(){//延时获取,否则可能没有返回长度
        var num = s.getDuration();
        alert(num)
    },100)

    s.play( function () {
        alert( "Audio play success!" );
    }, function ( e ) {
        alert( "Audio play error: " + e.message );
    } );
}
function pause(){//暂停播放
    s.pause();
}
function resume() {//恢复播放
    s.resume();
}
function seekTo(){
    s.seekTo(100);
}
    </script>
    </head>
    <body>
        <input type="button" value="Start Record" onclick="startRecord();"/>
        <br/>
        <input type="button" value="Stop Record" onclick="stopRecord();"/>
        <br />
        <input type="button" value="player" onclick="player();"/>
        <br />
        <input type="button" value="暂停" onclick="pause();"/>
        <br />
        <input type="button" value="恢复" onclick="resume();"/>
        <br />
        <input type="button" value="跳到指定位置" onclick="seekTo();"/>

</body>
</html>

原文地址:https://www.cnblogs.com/e0yu/p/10207394.html

时间: 2024-11-05 15:49:24

MUI音乐播放html5+audio模块的相关文章

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

基于Vue2.0的音乐播放器——歌手模块(拿不到数据)

来这里的都可能在看,慕课网vue2.0 的音乐播放器的相关页面,如果使用视频介绍的方法,相当于现在来说是获取数据回报如下的错误: {code: -500001, ts: 1529809544209} code : -500001 ts : 1529809544209 原因也简单:最新的vue2.0 webpack模板中没有dev-server.js文件,进行后台数据的模拟获取,只需要使用从接口获取数据后放在本地进行代理,页面就能拿到代理的数据了具体操作如下: before(app) { app.

html5 音乐播放器 audio 标签使用概述_html5教程技巧

<audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 <audioid="media"src="http://www.niuzen.com/test.mp3"controls></audio> <video> 标签属性:src:视频的URLposter:视频封面,没有播放时显示的图片preload:预加载autoplay:自

关于html5 audio 标签在ios系统上不能正常自动播放的解决办法

由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. 这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.但 iOS 9 出现后, 发现这个方案"失效"了. 没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件. 对于能够自动播放时事件的顺序如下loadstart -

HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

HTML5 Audio时代的MIDI音乐文件播放

大家都知道,HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式,但是有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持,因为mid文件并不像其他声音文件那样记录声音的采样信息,而是记录了乐器的演奏指令,二者的原理截然不同. mid文件格式的最突出的有点是文件极小,几分钟的音乐可能只 大家都知道,HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式,但是有个很重要的音乐文件格式midi(扩展名m

HTML5之audio实战,网页音乐播放器开发

今天我们就基于 HTML5 audio  来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播放器了,对于 一个HTML 新元素,无非就是 属性.事件 .方法等等,关于audio 的具体的属性.事件 .方法,请谷歌. 看我们的HTML代码: audio.html <!DOCTYPE html> <html> <head> <meta charset="

HTML5 audio标签 打造属于自己的音乐播放器

最近学习了HTML5中的Audio标签,学习他的最好方式当然是实践,于是就自己写了一个.那就直接上演示链接吧 http://htmlpreview.github.io/?https://github.com/djlxiaoshi/Audio/blob/master/music.html.模仿了QQ音乐网页版的部分样式.谁叫自己不会UI呢! HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Ca

使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og