Воспроизвести аудио локальный файл с помощью html

Question

Я пытаюсь сделать что-то вроде this.

Но я не знаю, почему я не получаю эту работу. Вот это codepen example:

$('input').on('change', function(e) { 

    var file = e.currentTarget.files[0]; 

    var reader = new FileReader(); 

    reader.onload = function(e) { 
    $('audio source').attr('src', e.target.result); 
    } 

    reader.readAsDataURL(file); 
}); 

Источник Тег получения base64 mp3 файл, но он не загружает файл в браузере.

Answer 1

Вы устанавливаете src атр непосредственно на звуковой элемент. fiddle

var $audio = $('#myAudio'); 
 
$('input').on('change', function(e) { 
 
    var target = e.currentTarget; 
 
    var file = target.files[0]; 
 
    var reader = new FileReader(); 
 
    
 
    console.log($audio[0]); 
 
    if (target.files && file) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function (e) { 
 
      $audio.attr('src', e.target.result); 
 
      $audio.play(); 
 
     } 
 
     reader.readAsDataURL(file); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file"> 
 
<audio controls id="myAudio" autoplay></audio>

Answer 2

<audio controls> 
<source src="yoraudio.ogg" type="audio/ogg"> 
<source src="youraudio.mp3" type="audio/mpeg"> 
Your browser does not support the audio element. 
</audio> 

Для получения дополнительной помощи посещения

This is the simplest way to play audio

Answer 3

В UWP вы можете воспроизвести файл напрямую, что вы можете получить по имени из музыкальной библиотеки, как показано ниже. Просто получите разрешение на доступ к Библиотеке музыки, проверив библиотеку в теге «Возможности» ваших свойств проекта.

picksinglefile(); 
     var l = Windows.Storage.KnownFolders.musicLibrary; 
     var f = localStorage.getItem("alarmname").toString(); 
     l.getFileAsync(f).then(function (file) { 
      // storagefile file is available 
      var s = window.URL.createObjectURL(file); // its a storage file, so create URL 
      player1.setAttribute("src", s); 
      player1.play(); // if autoplay is false or off 
     }); 


function picksinglefile() { 
// Create the picker object and set options 
var fop = new Windows.Storage.Pickers.FileOpenPicker(); 
fop.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.musicLibrary; 
fop.fileTypeFilter.replaceAll([".mp3", ".wav"]); 
fop.pickSingleFileAsync().then(function (file) { 
    if (file) { 
     localStorage.setItem("alarmname", file.name.toString()); 
    } else { 
     alert("Operation Cancelled"); 
    } 
});