入门篇 | 易学教程

来源于:https://yunp.top/app/index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>
<div id="vueapp">
    <div>
        <audio controls ref="audio"></audio>
    </div>
    <div>
        <select v-model="selectedAudioDeviceIndex">
            <option v-for="(d,index) in audioInputDevices" :value="index">{{d.label}}</option>
        </select>
    </div>
</div>
<script src="app.js"></script>
</body>
</html>

(async function () {
    // let devices = await navigator.mediaDevices.enumerateDevices();
    //
    // console.log(devices);

    let stream = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
    document.querySelector("audio").srcObject = stream;
})();


new Vue({
    el: "#vueapp",
    data: {
        audioInputDevices: [],
        selectedAudioDeviceIndex: 0
    },

    mounted() {
        this._initVueApp();
    },


    methods: {

        async _initVueApp() {
            let devices = await navigator.mediaDevices.enumerateDevices();
            console.log(devices);
            let audioInputDevices = devices.filter(value => value.kind === 'audioinput');
            console.log(audioInputDevices);
            this.audioInputDevices.length = 0;
            this.audioInputDevices.push(...audioInputDevices);

            this.showSelectedDevice();
        },

        async showSelectedDevice() {
            let deviceInfo = this.audioInputDevices[this.selectedAudioDeviceIndex];
            let stream = await navigator.mediaDevices.getUserMedia({video: false, audio: deviceInfo});
            this.$refs.audio.srcObject = stream;
        }
    },


    watch: {
        selectedAudioDeviceIndex(val, oldVal) {
            this.showSelectedDevice();
        }
    }
});

来源：oschina

链接：https://my.oschina.net/zhaodacai/blog/4304831

标签

Vue.js

AudioControls

App.js