如何让网络音频或本地音频文件发布到频道中

客官°小女子只卖身不卖艺 2023-01-21 02:28 162阅读 0赞

### 前言 ###

大家好，今天带给大家一个基于 anyRTC Web SDK 实现播放网络音频或本地音频文件的功能。

### 前提条件 ###

在开始写代码之前还需要做一些准备工作，如果你之前没有使用过 anyRTC Web SDK 这里还需要花几分钟时间准备一下， 详见：[开发前期准备][Link 1]

### 操作流程 ###

#### 配置 ####

const config = { 
        appid: appid, // 这里填写前面 "前提条件" 里面获取到的appid
        channel: '505050', // 频道号
        uid: 'web' + Math.floor(Math.random() * 2021428) // 随机生成的用户id
    };
    var client = null; // 本地客户端对象

#### 获取 DOM 节点 ####

#### 绑定点击事件 ####

// 网络音频
    urlButton.onclick = () => { 
        // http://music.163.com/song/media/outer/url?id=1811921555.mp3
        // 为了节省大家的时间，笔者这里给大家准备了一个网络音频资源
        // 大家可以把上面的链接放到浏览器地址栏访问一下，然后浏览器地址栏的地址会发生变化
        // 然后把改变后的浏览器地址栏地址复制到input框里面
        const source = urlInput.value;
        if (source) { 
            publishAndPlay(source);
        } else { 
            alert('请输入网络mp3链接');
        }
    };
    
    // 本地音频文件
    fileButton.onclick = () => { 
        const source = fileInput.files[0];
        if (source) { 
            publishAndPlay(source);
        } else { 
            alert('请选择音频文件');
        }
    };
    
    // 加入房间的逻辑本来是可以初始化的时候就自动做的
    // 但是由于谷歌浏览器不允许自动播放音频（必须要用户和页面发生交互才能播放）, 所以才加上点击加入房间的步骤；
    // 这是为了远端用户能自动播放
    join.onclick = () => { 
        const {  appid, channel, uid } = config;
        // 加入频道
        client.join(appid, channel, null, uid).then(() => { 
            // 一些样式操作
            urlButton.parentNode.style.display = 'flex';
            fileButton.parentNode.style.display = 'flex';
            join.style.display = 'none';
        }, () => { 
            alert('加入房间失败');
        });
    };

#### 方法函数 ####

const publishAndPlay = async (source) => { 
        const bufferAudioOptions = { source};
        // 通过音频文件或者 AudioBuffer 对象创建一个音频轨道。
        const track = await ArRTC.createBufferSourceAudioTrack(bufferAudioOptions);
        // 本地播放音频 (必须)
        track.play();
        // 启动进程音频缓冲 (必须)
        track.startProcessAudioBuffer();
        // 发布到频道中 (到这里远端用户(确保已加入频道)和本地都能听见声音了)
        client.publish(track);
    };

#### 项目初始化 ####

### 完整代码如下 ###

至此播放网络音频或本地音频文件的功能就完成了，感兴趣的小伙伴可以复制下方代码查看运行效果，如果你喜欢这篇文章或者想持续关注 anyRTC 的最新技术动向，可以关注我哦；

#### HTML 部分 ####

<div class='main'>
        <p class='join'>加入房间</p>
        <div class='url-box'>
            <input type="text" placeholder="输入网络mp3链接">
            <span class='button'>采集音频</span>
        </div>
        <div class='file-box'>
            <input type="file">
            <span class='button'>采集音频</span>
        </div>
    </div>
    <script src="/<YOUR_PATH>/to/ArRTC@latest.js"></script>
    <script src="index.js"></script>

#### CSS 部分 ####

.main { 
        display: flex;
        justify-content: space-between;
        width: 500px;
        margin: 50px auto;
    }
    
    .main .join { 
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100px;
        line-height: 34px;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background-color: #409EFF;
        cursor: pointer;
        transform: translate(-50px, -17px);
        transition: .3s;
    }
    
    .main .join:hover { 
        background-color: #66B1FF;
    }
    
    .main .url-box, .file-box { 
        display: none;
        height: 80px;
        justify-content: space-between;
        flex-direction: column;
        margin-bottom: 40px;
    }
    
    .main .button { 
        display: inline-block;
        width: 80px;
        line-height: 26px;
        border-radius: 2px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background-color: #409EFF;
        cursor: pointer;
    }

#### Javascript 部分 ####

[Link 1]: https://juejin.cn/post/6956045461396389901/