英文:
how to play upload audio on button click in javascript
问题
我有一个代码，在选择文件时播放音频，但我想要在按钮点击时播放音频而不存储它。但在按钮点击时它不起作用。
这是我的Blade文件：
<label for="audioFile" class="input-label">音频文件</label>
<input type="file" id="audioFile" class="form-control" name="audio-file[]" accept="audio/*">
<button onclick="fileSelect(event)" type="button" style="color: cornflowerblue; border: white; background-color: white;"><i class="fa fa-volume-up test"></i></button>
<audio id="audio-preview"></audio>
这是JavaScript代码：
function fileSelect(e) {
var sound = document.getElementById('audio-preview');
var reader = new FileReader();
reader.onload = function(e) {
sound.src = this.result;
sound.controls = true;
sound.play();
};
reader.readAsDataURL(e.target.files[0]);
}
还有一件事，当音频播放时，多媒体播放器没有显示。
请有人帮助解决我的问题。
提前感谢您。
英文:
I have a code to play an audio when choosing file but i want to play audio on button click without storing it . but on button click its not working .
there is my blade file
<label for="audioFile" class="input-label">Audio File</label>
<input type="file" id="audioFile" class="form-control" name="audio-file[]" accept="audio/*" >
<button onclick="fileSelect(event)" type="button" style="color:cornflowerblue;border:white;background-color:white;"><i class="fa fa-volume-up test"></i></button>
<audio id="audio-preview" ></audio>
This is the javascript code
function fileSelect(e){
// console.log(e.target.files[0].name);
var sound = document.getElementById('audio-preview');
var reader = new FileReader();
reader.onload = function(e) {
sound.src = this.result;
sound.controls = true;
sound.play();
};
reader.readAsDataURL(e.target.files[0]);
}
And one more thing when audio is playing the multiplayer is not shown.
Please any one help to solve my issue .
Thanks in Advance,
答案1
得分: 1
你不需要使用FileReader来获取base64 URL，这是一种浪费时间的绕过方式，需要无谓的编码/解码。而是使用URL.createObjectURL
const selectFile = document.querySelector('#selectFile')
const audioFile = document.querySelector('#audioFile')
const sound = document.getElementById('audio-preview')
selectFile.addEventListener('click', () => audioFile.click())
function fileSelect(evt) {
sound.src = URL.createObjectURL(evt.target.files[0])
sound.controls = true
sound.play()
}
audioFile.addEventListener('change', fileSelect)
<input type="file" id="audioFile" accept="audio/*">
<button id="selectFile">Select file</button>
<audio id="audio-preview"></audio><br>
<meta name="color-scheme" content="dark light">
英文:
You don't need to use the FileReader to get a base64 url. that's a wasteful round about way that requires encoding/decoding in vain. instead use URL.createObjectURL
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const selectFile = document.querySelector('#selectFile')
const audioFile = document.querySelector('#audioFile')
const sound = document.getElementById('audio-preview')
selectFile.addEventListener('click', () => audioFile.click())
function fileSelect (evt){
sound.src = URL.createObjectURL(evt.target.files[0])
sound.controls = true
sound.play()
}
audioFile.addEventListener('change', fileSelect)
<!-- language: lang-html -->
<input type="file" id="audioFile" accept="audio/*">
<button id="selectFile">Select file</button>
<audio id="audio-preview"></audio><br>
<meta name="color-scheme" content="dark light">
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论