diff --git a/resources/vue/components/courseware/CoursewareAudioBlock.vue b/resources/vue/components/courseware/CoursewareAudioBlock.vue index eddf0c74f63cc33ee1414d8a1750cb64bf0d335d..6d3619d2f89fcd4be36a796fc5b8b28a0b519fdc 100755 --- a/resources/vue/components/courseware/CoursewareAudioBlock.vue +++ b/resources/vue/components/courseware/CoursewareAudioBlock.vue @@ -141,8 +141,8 @@ <label v-show="currentSource === 'studip_folder'"> <translate>Audio Aufnahmen zulassen</translate> <select v-model="currentRecorderEnabled"> - <option value="true"><translate>Ja</translate></option> - <option value="false"><translate>Nein</translate></option> + <option :value="true"><translate>Ja</translate></option> + <option :value="false"><translate>Nein</translate></option> </select> </label> </form> @@ -231,6 +231,7 @@ export default { { type: 0, file_id: id, file_name: attributes.name }, true ), + mime_type: attributes['mime-type'] }; }); }, @@ -259,7 +260,7 @@ export default { return this.block?.attributes?.payload?.recorder_enabled; }, showRecorder() { - return this.currentRecorderEnabled === 'true'; + return this.currentRecorderEnabled; }, hasPlaylist() { return this.files.length > 0 && this.currentSource === 'studip_folder'; @@ -324,6 +325,7 @@ export default { updateBlock: 'updateBlockInContainer', companionWarning: 'companionWarning', companionSuccess: 'companionSuccess', + companionError: 'companionError', createFile: 'createFile', }), initCurrentData() { @@ -383,8 +385,25 @@ export default { this.durationSeconds = this.$refs.audio.duration; }, playAudio() { - this.$refs.audio.play(); - this.playing = true; + const audio = this.$refs.audio; + let isSupported = 'unknown'; + if (this.currentSource === 'studip_file') { + isSupported = audio.canPlayType(this.currentFile.mime_type); + } + if (this.currentSource === 'studip_folder') { + isSupported = audio.canPlayType(this.files[this.currentPlaylistItem].mime_type); + } + if (isSupported !== '') { + audio.play(); + this.playing = true; + } else { + this.companionError({ + info: this.$gettext('Ihr Browser unterstützt dieses Audioformat leider nicht.') + }); + if(this.hasPlaylist) { + this.nextAudio(); + } + } }, pauseAudio() { this.$refs.audio.pause(); @@ -474,6 +493,7 @@ export default { { type: 0, file_id: fileRef.id, file_name: fileRef.attributes.name }, true ), + mime_type: fileRef.attributes['mime-type'] }); } }, @@ -481,13 +501,13 @@ export default { let view = this; navigator.mediaDevices.getUserMedia({audio: true}).then(_stream => { let stream = _stream; - view.recorder = new MediaRecorder(stream); + view.recorder = new MediaRecorder(stream, {mimeType: 'audio/ogg; codecs=opus'}); view.userRecorderEnabled = true; view.recorder.ondataavailable = e => { view.chunks.push(e.data); if(view.recorder.state == 'inactive') { - this.blob = new Blob(view.chunks, {type: 'audio/mpeg' }); + this.blob = new Blob(view.chunks, {type: 'audio/ogg; codecs=opus' }); } }; view.recorder.start(); @@ -527,7 +547,7 @@ export default { let user = this.usersById({id: this.userId}); let file = {}; file.attributes = {}; - file.attributes.name = (user.attributes["formatted-name"]).replace(/\s+/g, '_') + '.mp3'; + file.attributes.name = (user.attributes["formatted-name"]).replace(/\s+/g, '_') + '.ogg'; let fileObj = false; try { fileObj = await this.createFile({